Selector adalah cara kita menunjuk elemen mana yang akan distyling. Section ini membahas seluruh jenis selector dari yang paling dasar hingga kombinasinya, kemudian menutup dengan specificity dan best practices agar styles kita tetap mudah dirawat.

# Type Selector

Kenali type selector, cara paling dasar menunjuk elemen melalui nama tag HTML-nya.

Buka → # Class dan ID Selector

Gunakan class untuk mengelompokkan banyak elemen dan ID untuk menunjuk satu elemen khusus, lengkap dengan panduan memilih keduanya.

Buka → # Attribute Selector

Menunjuk elemen berdasarkan atribut HTML-nya, dari pencocokan persis hingga pola awalan, akhiran, dan potongan nilai.

Buka → # Combinators

Rangkai beberapa selector untuk menunjuk elemen berdasarkan hubungannya di pohon DOM: descendant, child, dan sibling.

Buka → # Pseudo-classes

Tunjuk elemen berdasarkan state, posisi dalam struktur, dan kondisi form dengan pseudo-class, tanpa menambah class ke HTML.

Buka → # Pseudo-elements

Hiasi elemen dengan ::before, ::after, dan pseudo-element lain untuk menggayakan bagian elemen yang tak bisa ditunjuk selector biasa.

Buka → # Selector Lists

Tulis beberapa selector dalam satu aturan dengan koma, pahami list yang memafkan dan yang tidak, serta kenali :is() sebagai solusinya.

Buka → # Specificity

Hitung specificity tiga komponen (ID, class, type) untuk memahami aturan CSS mana yang menang saat beberapa selector menunjuk elemen yang sama.

Buka → # Selector Best Practices

Susun selector yang rendah specificity, tahan perubahan HTML, dan tetap mudah dibaca seiring proyek membesar.

Buka →