Selektor lanjutan

Kombinator, pseudo-class struktural, dan selektor atribut.

Pahami konsepnya

Kombinator menghubungkan dua selektor menjadi hubungan. Spasi (descendant) menimpa semua keturunan: .menu a menyentuh semua tautan di kedalaman berapa pun. Tanda > (child) membatasi pada anak langsung: .menu > li hanya butir tingkat pertama — anak dari sub-daftar lolos. Tanda + (adjacent sibling) menimpa saudara tepat setelahnya: h2 + p mengatur paragraf pertama seusai heading. Tanda ~ (general sibling) menjangkau semua saudara setelahnya.

Pseudo-class struktural memilih berdasarkan posisi: :first-child dan :last-child, :nth-child(2) untuk urutan pasti, :nth-child(odd)/even untuk baris ganjil-genap (sahabat tabel zebra), dan :nth-child(3n) untuk tiap ketiga. Yang seru :not() yang memfilter kebalikannya: li:not(.aktif) menimpa semua butir kecuali yang aktif. Ada juga :focus untuk kondisi fokus input, :checked untuk checkbox terpilih, dan :focus-within yang menyala bila anak-anaknya sedang difokuskan.

Selektor atribut menyeleksi lewat atribut HTML: [type="email"] menimpa semua input email, [href^="https"] semua tautan yang diawali https, dan [data-harga] semua elemen yang punya atribut itu berapa pun nilainya — pintu menuju HTML yang kaya metadata tanpa class tambahan.

Coba contoh kode

/* kombinator */
.menu > li      { font-weight: bold; }
h2 + p          { text-indent: 0; }

/* struktural */
tr:nth-child(even) { background: #f2f7f9; }
li:not(.aktif)     { opacity: 0.55; }

/* atribut */
input[type="email"]   { border-color: teal; }
a[href^="https"]::after { content: " ↗"; }

Enam baris, enam rasa ketepatan: > menjaga sub-menu tidak ikut tebal, + memberi perlakuan khusus paragraf pembuka, nth-child(even) menulis zebra tanpa class manual, :not() meredupkan menu tak aktif, dan selektor atribut menandai tautan eksternal tanpa menyentuh HTML-nya — halaman terasa "tahu kondisinya sendiri".

Trik checkbox tanpa JavaScript

<input type="checkbox" id="saklar">
<label for="saklar">Tampilkan detail</label>

<div class="detail">Teks rahasia di sini.</div>

Dengan CSS: .detail { display: none; } lalu #saklar:checked ~ .detail { display: block; }. Kombinasi :checked dan ~ (saudara umum) membuat toggle bekerja murni di CSS — bukti bahwa selektor tepat bisa menggantikan skrip kecil.

Latihan singkat

Buat daftar tugas yang mencoret li yang memuat checkbox :checked (pakai ~ atau struktur label), lalu tandai semua tautan eksternal dengan selektor atribut.