WebTech Interaktif

CSS · Bab 2

Selector, Cascade, dan Spesifisitas

Memilih elemen dengan selector elemen, class, id, turunan, grup, dan atribut, memakai pseudo-class dan pseudo-element, menghaluskan perubahan dengan transition, serta memahami cascade, spesifisitas, pewarisan, dan bahaya important.

Selector menentukan elemen mana yang diatur sebuah rule. Bila beberapa rule mengatur elemen yang sama dengan nilai berbeda, browser memakai aturan cascade untuk memilih pemenangnya. Memahami keduanya adalah kunci agar CSS bekerja sesuai harapan.

2.1 Selector Dasar

SelectorContohMemilih
selector elemenpsemua <p>
selector class.statussemua elemen ber-class="status"
selector id#katalogsatu elemen ber-id="katalog"
selector turunanarticle p<p> di dalam <article>, sedalam apa pun
selector anaknav > a<a> yang menjadi anak langsung <nav>
selector gruph1, h2<h1> dan <h2> sekaligus
selector atributa[href^="https"]<a> yang href-nya diawali https
universal*semua elemen

Satu elemen boleh punya beberapa class sekaligus: class="kartu dipinjam". Nama class dan id membedakan huruf besar dan kecil. Untuk menata, pilih class. Id cocok untuk tautan fragment, tetapi terlalu kuat untuk gaya (lihat 2.5).

HTML + JavaScript

🧪 Coba ubah: tambahkan class="status" pada paragraf “Laskar Pelangi”, lalu jalankan.

2.2 Pseudo-class: :hover, :focus, dan :first-child

Pseudo-class memilih elemen berdasarkan keadaannya:

  • :hover: saat kursor berada di atas elemen.
  • :focus: saat elemen sedang fokus, misalnya isian yang diklik atau tautan yang dicapai dengan tombol Tab.
  • :first-child: elemen yang menjadi anak pertama induknya.
HTML + JavaScript

🧪 Coba ubah: klik kotak “Cari buku”, lalu tekan Tab dan Shift+Tab untuk melihat :focus berpindah.

Jangan menghapus tanda fokus dengan outline: none tanpa penggantinya. Pengguna keyboard bergantung pada tanda itu untuk tahu posisi mereka di halaman.

2.3 Pseudo-element ::before dan ::after

Pseudo-element menambahkan isi hiasan sebelum (::before) atau sesudah (::after) isi elemen. Properti content: wajib ditulis, walaupun nilainya kosong (content: ""), karena tanpa content pseudo-element tidak tampil.

HTML + JavaScript

Isi ::before dan ::after tidak bisa dipilih atau disalin seperti teks biasa, dan sebagian pembaca layar ikut membacanya. Pakai hanya untuk hiasan, bukan untuk informasi penting. Tanda * pada contoh .wajib hanya demonstrasi: di form sungguhan, penanda isian wajib ada di teks <label> dan atribut required, bukan di CSS.

2.4 Transisi Sederhana dengan transition

Perubahan karena :hover biasanya terjadi seketika. transition menghaluskannya:

HTML + JavaScript
  • Tulis transition di keadaan awal (.tombol), bukan hanya di :hover, supaya perubahan masuk dan keluar sama-sama halus.
  • Bentuk umumnya: nama properti, durasi (0.3s), dan fungsi waktu (ease, linear, ease-in-out). Beberapa properti dipisah koma.
  • Properti yang nilainya bisa berubah bertahap, seperti warna, ukuran, opacity, dan transform, bisa dihaluskan. Properti yang hanya berganti antar kata kunci, seperti display, tidak ikut dihaluskan oleh transition biasa.
  • transition: all memang berfungsi, tetapi ikut menganimasikan properti yang tidak kamu niatkan. Sebutkan propertinya satu per satu.

2.5 Cascade dan Spesifisitas

Bila beberapa deklarasi mengatur properti yang sama pada elemen yang sama, cascade memilih pemenang dengan urutan berikut:

  1. Kepentingan: deklarasi !important mengalahkan deklarasi biasa.
  2. Spesifisitas: selector yang lebih spesifik menang.
  3. Urutan: bila spesifisitasnya sama, yang ditulis paling akhir menang.

Spesifisitas (specificity) dihitung sebagai tiga angka (id, class, elemen):

  • kolom pertama: jumlah selector id;
  • kolom kedua: jumlah class, selector atribut, dan pseudo-class;
  • kolom ketiga: jumlah selector elemen dan pseudo-element.

Angka dibandingkan dari kiri: (0, 1, 0) mengalahkan (0, 0, 5). Selector * bernilai nol. Gaya inline (atribut style) mengalahkan semua selector.

SelectorSpesifisitas
p(0, 0, 1)
article p(0, 0, 2)
.status(0, 1, 0)
p.status(0, 1, 1)
a:hover(0, 1, 1)
#katalog(1, 0, 0)
#katalog .status p(1, 1, 1)
HTML + JavaScript

🧪 Coba ubah: tukar urutan dua rule p (gray dan navy). Paragraf pertama kini abu-abu.

2.6 Pewarisan

Sebagian properti diwariskan dari induk ke anak (pewarisan, inheritance), terutama yang berkaitan dengan teks: color, font-family, font-size, dan line-height. Properti kotak seperti border, padding, margin, dan background tidak diwariskan. Nilai inherit memaksa sebuah properti mengambil nilai induknya.

Nilai warisan selalu kalah oleh aturan yang langsung mengenai elemen itu, serendah apa pun spesifisitasnya.

HTML + JavaScript

2.7 Mengapa Menghindari !important

!important membuat sebuah deklarasi mengalahkan semua deklarasi biasa, berapa pun spesifisitasnya:

.status {
  color: crimson !important;
}

Masalahnya, satu-satunya cara mengalahkannya adalah !important lain, dan sejak itu CSS berubah menjadi perlombaan. Bila sebuah aturan kalah, perbaiki penyebabnya: pakai selector yang sedikit lebih spesifik, atau pindahkan aturan ke posisi yang lebih akhir.

2.8 Ringkasan

  • Selector elemen, class, id, turunan, anak, grup, dan atribut memilih elemen. Untuk menata, utamakan class.
  • Pseudo-class (:hover, :focus, :first-child) memilih keadaan. Pseudo-element (::before, ::after) menambah hiasan dan wajib punya content.
  • transition menghaluskan perubahan dan ditulis di keadaan awal.
  • Cascade: kepentingan, lalu spesifisitas (id, class, elemen), lalu urutan.
  • Teks diwariskan dari induk, sedangkan kotak tidak. Hindari !important.