Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Dasar-Dasar Selektor CSS Bertingkat

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

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 6 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!