Dasar-Dasar Selektor CSS Bertingkat

Pertanyaan yang seringkali terlintas dalam kepala saat melihat ini adalah, elemen mana yang akan dikenai deklarasi display:block?

CSS Menu navigasi bertingkat

Oke. Pada dasarnya selektor CSS itu memiliki peraturan yang tidak jauh berbeda dengan kode 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 seperti saat membaca tulisan.

Katakan saja kita memiliki beberapa elemen <article>, <div> dan <span> yang tersusun seperti ini:

<article>
    <div class="post-body">
        <span>Lorem ipsum</span>
    </div>
    <span>Lorem ipsum</span>
</article>
<span>Lorem ipsum</span>

Kita akan memberikan warna merah pada tulisan "Lorem ipsum". Untuk melakukannya caranya sangat mudah. Cukup tuliskan:

span {color:red;}

Begitu saja! Tapi, setelah itu mungkin akan muncul keinginan lain. Misalnya, kita ingin warna merah diterapkan hanya pada teks yang berada di dalam elemen <span> yang berada di dalam .post-body. Untuk membuat selektornya menjadi lebih spesifik, maka kita tuliskan .post-body sebelum span seperti 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 berdasarkan posisi elemen seperti contoh di atas:

article .post-body span {color:red;}

Kesimpulannya adalah, pada dasarnya ketiga selektor di atas memiliki tugas 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 pada dasarnya memiliki target 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 datang lebih awal adalah induk elemen dari selektor berikutnya. Selektor terakhir adalah 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 tepat setelah elemen <article> saat kita menggunakan pemisah berupa simbol + yang kemudian diikuti oleh selektor CSS berupa div, dan akan menyeleksi semua elemen <div> yang ditemukan bersebelahan setelah <article> saat kita menggunakan pemisah berupa simbol ~ yang kemudian diikuti oleh selektor div:

Coba Sendiri

Saya sudah membuat sebuah generator CSS sederhana untuk referensi ini. Cukup ganti selektor CSS sesuka hati berdasarkan contoh-contoh di atas dan lihat elemen mana yang akan dikenai garis batas berwarna merah. Beberapa contoh 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 {}

Layar Penuh

Kesimpulan Pertanyaan Awal

Elemen mana yang akan dikenai deklarasi display:block pada gambar pertama?

Ini dia jawabannya:

CSS akan memberikan deklarasi display:block pada elemen <ul> yang berada tepat setelah 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 memiliki id="main"
Kode CSS menu navigasi bertingkat untuk perangkat non-hover seperti Tablet PC :)