Dasar-Dasar Selektor CSS Bertingkat

Tabel Konten
  1. Dasar Dasar 
    1. Selektor Keturunan (Descendant Selector) 
    2. Selektor Anak Terdekat (Child Selector) 
    3. Selektor Bersebelahan (Adjacent Sibling Selector) 
  2. Coba Sendiri 
  3. Kesimpulan Pertanyaan Awal 

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

CSS Selector
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>:

CSS - Descendant Selector

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):

CSS - Direct Children

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:

CSS - Adjacent Sibling Selector, Next Sibling
CSS - Adjacent Sibling Selector, Next-All Sibling

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 :)

6 Komentar

  • Putra

    selector didalam selector, panjang banget haha.. sempet bingung =D
    btw, "..yang berada di dalam elemen.." banyak amat haha :D

  • Impotensia

    :D wahh ilmu baru :-bd

  • Anonim

  • Unknown

    wah bermanfaat nih..
    top deh mas Taufik.. :-bd

  • Unknown

    nah ini antara

    article div {}
    article > div {}

    susah ngebedainnya, sekarang segalanya telah benderang, \o/ \o/ \o/

    :-bd

  • Hengki Kristianto

    penjelasan yang sangat detail kang, saya sebagai pemula sangat terbantukan dengan artikel ini, Terimakasih atas artikel ini yang sangat bermanfaat, saya harapkan jangan putus semangat untuk tetap memberikan tips dan tutor seperti ini, terimakasih kang. salam kenal

Komentar telah ditutup.