Section ini membahas selectors sebagai bagian dari Course CSS. Ikuti chapter di dalamnya secara berurutan karena setiap chapter dibangun di atas pemahaman chapter sebelumnya. Gunakan demo interaktif pada setiap halaman untuk melihat langsung efek kode yang sedang dibahas.

# Universal Selector

Gunakan universal selector (*) untuk menerapkan satu aturan pada semua elemen sekaligus, dari reset margin hingga box-sizing global.

Buka → # Element Selector

Menyasar elemen lewat nama tag-nya dan memakainya sebagai lapisan gaya dasar yang konsisten untuk seluruh halaman.

Buka → # Class Selector

Kuasai class selector (.), alat utama CSS untuk menandai sekelompok elemen dan menyusun gaya dari potongan yang dapat dipakai ulang.

Buka → # ID Selector

Pahami id selector (#), kegunaan sahnya di luar styling, dan mengapa bobotnya yang tinggi membuatnya jarang tepat untuk styling.

Buka → # Attribute Selector

Menyasar elemen berdasarkan atribut HTML-nya, dari [type] pada input hingga pola awalan dan akhiran pada href.

Buka → # Descendant Selector

Menggabungkan dua selector dengan spasi untuk menyasar elemen berdasarkan posisinya di dalam elemen lain, sedalam apa pun.

Buka → # Child Selector

Pilih hanya anak langsung dengan combinator > dan pahami kapan selector yang ketat lebih baik daripada spasi.

Buka → # Sibling Selector

Menata elemen berdasarkan tetangganya dengan combinator + untuk saudara tepat di sebelah dan ~ untuk semua saudara berikutnya.

Buka → # Selector List

Memahami selector list secara menyeluruh: evaluasi per anggota, list toleran dengan :is() dan :where(), serta perbedaan specificity-nya.

Buka → # Menggabungkan Selectors

Menempelkan beberapa selector menjadi compound selector, merangkai class pada satu elemen, dan menyusun jalur campuran yang tetap terbaca.

Buka → # Memilih Selector yang Tepat

Panduan keputusan memilih selector: peta situasi, prinsip penulisan yang mudah dirawat, dan demo penerapannya pada satu markup kecil.

Buka →