Pertanyaan yang seringkali terlintas dalam kepala dikala melihat ini adalah, elemen mana yang akan dikenai deklarasi display:block?
Oke. Pada dasarnya selektor CSS itu mempunyai peraturan yang tidak jauh berbeda dengan arahan HTML. Yaitu kita diminta untuk membaca dari luar menuju ke dalam, atau sebaliknya, dari dalam menuju ke luar dan bukan membaca dari atas ke bawah atau menyamping ibarat dikala membaca tulisan.
Katakan saja kita mempunyai beberapa elemen <article>, <div> dan <span> yang tersusun ibarat ini:
<article> <div class="post-body"> <span>Lorem ipsum</span> </div> <span>Lorem ipsum</span> </article> <span>Lorem ipsum</span>Kita akan menunjukkan warna merah pada goresan pena "Lorem ipsum". Untuk melakukannya caranya sangat mudah. Cukup tuliskan:
span {color:red;}Begitu saja! Tapi, sehabis itu mungkin akan muncul cita-cita lain. Misalnya, kita ingin warna merah diterapkan hanya pada teks yang berada di dalam elemen <span> yang berada di dalam .post-body. Untuk menciptakan selektornya menjadi lebih spesifik, maka kita tuliskan .post-body sebelum span ibarat ini:
.post-body span {color:red;}Kode di atas akan memberi warna merah pada teks yang berada di dalam elemen <span>, dimana elemen <span> tersebut harus berada di dalam elemen <div class="post-body">.
Ingin lebih spesifik lagi? Urutkan selektor CSS yang ditemukan menurut posisi elemen ibarat rujukan di atas:
article .post-body span {color:red;}Kesimpulannya adalah, intinya ketiga selektor di atas mempunyai kiprah yang sama persis, yaitu memberi warna merah pada teks di dalam elemen <span>. Hanya spesifikasinya saja yang berbeda-beda. Contoh lain:
li {color:blue;} ul li {color:blue;} nav li {color:blue;} nav ul li {color:blue;}Semua selektor di atas intinya mempunyai sasaran elemen yang sama, yaitu elemen <li>. Tapi, selektor pertama akan memberi warna biru pada semua elemen <li> tanpa terkecuali. Selektor ke dua akan memberi warna biru pada elemen <li> yang berada di dalam elemen <ul>. Selektor ke tiga akan memberi warna biru pada elemen <li> yang berada di dalam elemen <nav>. Selektor ke empat sama dengan selektor ke tiga, hanya saja lebih spesifik. Dia akan memberi warna biru pada elemen <li> yang berada di dalam elemen <ul>, dimana elemen <ul> tersebut berada di dalam elemen <nav>
Dasar-Dasar
Selektor Keturunan (Descendant Selector)
Baru saja Saya jelaskan di atas. Setiap selektor yang tiba lebih awal ialah induk elemen dari selektor berikutnya. Selektor terakhir ialah elemen yang akan dikenai perintah. Pada gambar di bawah, terlihat bahwa CSS akan menargetkan semua elemen <div> yang berada di dalam <article>:
Selektor Anak Terdekat (Child Selector)
Terbentuk dari dua atau lebih item selektor CSS yang dipisahkan oleh simbol >, berfungsi untuk menyeleksi anak terdekat dari elemen induk. Pada gambar di bawah, terlihat bahwa CSS akan menargetkan elemen <div> yang menjadi lapisan dalam terdekat dari induk (anak terdekat dari artikel):
Selektor Bersebelahan (Adjacent Sibling Selector)
Terbentuk dari dua atau lebih item selektor CSS yang dipisahkan oleh simbol + atau , berfungsi untuk menyeleksi elemen yang berada setelah elemen yang menjadi subjek (selektor pertama).
Simbol + lebih spesifik dibandingkan simbol . Pada gambar di bawah, terlihat bahwa CSS akan menargetkan elemen <div> yang berada sempurna sehabis elemen <article> dikala kita memakai pemisah berupa simbol + yang lalu diikuti oleh selektor CSS berupa div, dan akan menyeleksi semua elemen <div> yang ditemukan bersebelahan sehabis <article> dikala kita memakai pemisah berupa simbol yang lalu diikuti oleh selektor div:
Coba Sendiri
Saya sudah menciptakan sebuah generator CSS sederhana untuk referensi ini. Cukup ganti selektor CSS sesuka hati menurut contoh-contoh di atas dan lihat elemen mana yang akan dikenai garis batas berwarna merah. Beberapa rujukan selektor CSS yang Saya sarankan:
article div {} article > div {} article + div {} article div {} article .wrap-3 {} article + div div {} article div > div {} article + div > div {} article .wrap-1 + div {}
Kesimpulan Pertanyaan Awal
Elemen mana yang akan dikenai deklarasi display:block pada gambar pertama?
Ini ia jawabannya:
Sumber https://www.dte.web.id/CSS akan menunjukkan deklarasi
display:blockpada elemen<ul>yang berada sempurna sehabis elemen<a>yang terfokus (baru saja diklik), dimana elemen<a>terfokus tersebut berada di dalam elemen<li>yang berada di dalam elemen<ul>yang berada di dalam elemen<li>yang berada di dalam elemen<ul>yang berada di dalam elemen<li>yang berada di dalam elemen<ul>yang berada di dalam elemen<nav>, dimana elemen<nav>tersebut berada di dalam suatu elemen yang mempunyaiid="main"Kode CSS sajian navigasi bertingkat untuk perangkat non-hover ibarat Tablet PC :)