Di artikel sebelumnya, kamu sudah lihat seperti apa bentuk satu rule CSS: ada selector di depan, lalu satu blok declaration. Bagian declaration itu yang gampang — color: blue; ya artinya persis seperti yang tertulis. Yang butuh keterampilan justru selector-nya, karena selector inilah yang menentukan elemen mana yang kena style. Salah pilih elemen, halamanmu jadi berantakan. Pilih elemen yang tepat, semuanya langsung rapi di tempatnya.
Nah, artikel ini fokus penuh ke selector. Kita akan bahas tiga jenis yang paling sering kamu pakai, cara menggabungkannya, selector khusus bernama “pseudo-class” seperti :hover, dan terakhir gimana CSS menentukan rule mana yang menang kalau ada beberapa rule yang sama-sama berlaku ke satu elemen.
Selector element
Selector yang paling sederhana memilih elemen berdasarkan nama tag-nya. Kamu cukup tulis nama tag-nya, dan rule itu langsung berlaku ke semua elemen sejenis:
p {
color: #333;
}
h1 {
font-size: 32px;
}Rule pertama menata semua <p> di halaman, sedangkan yang kedua menata semua <h1>. Cara ini pas banget buat menetapkan tampilan default untuk seluruh situs — misalnya “semua paragraf warnanya abu-abu gelap” atau “semua judul ukurannya segini.” Tapi selector ini kasar: dia menyapu semua elemen sejenis sekaligus, tanpa bisa menyendirikan satu elemen tertentu. Untuk itu, kamu perlu class dan id.
Selector class
Selector class memilih elemen yang punya atribut class tertentu. Cara nulisnya: titik (.) lalu diikuti nama class-nya. Masih ingat dari artikel atribut HTML? Class itu semacam label yang bisa kamu tempelkan ke elemen mana saja, dan satu class yang sama bisa dipakai oleh banyak elemen sekaligus.
Di HTML-mu:
<p class="intro">Ini bagian pengantar.</p>
<p>Ini paragraf biasa.</p>Di CSS-mu:
.intro {
font-weight: bold;
font-size: 20px;
}Selector .intro cuma mengenai elemen yang punya class="intro" — jadi paragraf pertama tampil tebal dan lebih besar, sementara yang kedua dibiarkan apa adanya. Inilah selector yang paling sering kamu pakai sehari-hari. Nanti kamu akan bikin class untuk tombol, kartu, header, kotak peringatan — pokoknya apa pun yang mau kamu tata secara berkelompok.
Class adalah senjata utamamu buat menata
Di proyek beneran, hampir semua pekerjaan menata tampilan dilakukan pakai selector class. Alasannya: class itu fleksibel (elemen apa pun boleh dikasih class apa pun), bisa dipakai berulang (kasih sepuluh tombol class button, lalu tata semuanya dalam satu rule), dan bikin maksudmu gampang dibaca. Jadi pas kamu lagi mikir mau menata sesuatu, pilih class duluan — pakai selector element buat default yang umum, dan class buat hal-hal yang lebih spesifik.
Selector id
Selector id memilih satu elemen yang punya atribut id tertentu. Cara nulisnya pakai tanda pagar (#) lalu diikuti nama id-nya:
<div id="header">...</div>#header {
background-color: #00838f;
}Karena id wajib unik di satu halaman (cuma boleh ada satu elemen yang memakainya), selector id otomatis cuma mengenai satu elemen saja. Kedengarannya praktis, ya. Tapi pada praktiknya, kebanyakan developer justru lebih memilih class buat menata, bahkan untuk elemen yang cuma muncul sekali. Kenapa begitu? Selain karena class lebih fleksibel, selector id punya efek samping pada “cascade” (kita bahas sebentar lagi) yang bisa bikin style-mu malah lebih repot diatur.
Buat menata, dahulukan class daripada id
Sebenarnya kamu boleh saja menata pakai selector id. Tapi saran yang umum: pakai class untuk urusan menata, dan simpan id untuk keperluan lain — misalnya buat menautkan ke bagian tertentu (href="#contact") atau supaya JavaScript bisa menangkap satu elemen spesifik. Soal menata, class bisa melakukan semua hal yang bisa dilakukan id, tapi dengan lebih sedikit drama. Ini memang bukan aturan baku, tapi kalau kamu membiasakan diri menata pakai class, kamu bakal terhindar dari sederet masalah yang ribet di kemudian hari.
Menggabungkan dan mengelompokkan selector
Selector jadi jauh lebih ampuh begitu kamu mulai menggabungkannya.
Kelompokkan selector pakai koma kalau mau menerapkan style yang sama ke beberapa elemen sekaligus:
h1, h2, h3 {
font-family: Georgia, serif;
}Cukup satu rule itu untuk menata ketiga level judul tadi. Tanpa koma, kamu mesti menulis ulang declaration-nya sampai tiga kali.
Gabungkan selector kalau mau lebih spesifik. Menaruh dua selector berdampingan dengan dipisah spasi artinya “elemen yang ada di dalam elemen lain”:
.card p {
color: grey;
}Selector ini mengenai <p> mana pun yang ada di dalam elemen ber-class card — sementara paragraf yang di luar dibiarkan saja. Penggabungan model “keturunan” (descendant) seperti ini sangat sering dipakai, karena memungkinkan kamu menata elemen berdasarkan posisinya di dalam halaman.
Kamu juga bisa menempelkan dua selector tanpa spasi, yang artinya “satu elemen yang sekaligus cocok dengan keduanya”:
p.intro {
font-style: italic;
}Selector ini cuma mengenai elemen <p> yang sekaligus punya class intro — bukan elemen lain yang kebetulan ber-class intro, dan bukan pula paragraf yang tidak ber-class itu.
Pseudo-class: menata berdasarkan keadaan
Beberapa selector yang paling berguna justru memilih elemen berdasarkan keadaannya — yaitu berdasarkan apa yang sedang dilakukan pengguna ke elemen itu. Selector semacam ini disebut pseudo-class, dan ditulis dengan titik dua (:).
Contoh klasiknya :hover, yang aktif selama kursor pengguna sedang berada di atas suatu elemen:
a:hover {
color: red;
}Sekarang setiap tautan akan berubah merah begitu kursor kamu arahkan ke atasnya — sentuhan interaktif kecil yang bikin halaman terasa lebih hidup. Ini beberapa pseudo-class yang umum dipakai:
| Pseudo-class | Aktif saat… |
|---|---|
:hover |
Kursor sedang berada di atas elemen |
:focus |
Elemen sedang fokus (mis. input yang baru diklik) |
:active |
Elemen sedang dalam keadaan diklik |
:first-child |
Elemen adalah anak pertama dari induknya |
:last-child |
Elemen adalah anak terakhir dari induknya |
Dengan ini kamu bisa merespons interaksi maupun posisi tanpa pakai JavaScript sama sekali — murni CSS.
Cascade: rule mana yang menang?
Ini dia pertanyaan yang cepat atau lambat bakal bikin setiap pemula bingung: apa yang terjadi kalau ada dua rule yang sama-sama mau menata satu elemen, tapi dengan cara yang berbeda? Misalnya begini:
p {
color: black;
}
.intro {
color: blue;
}Kalau ada paragraf yang punya class="intro", kedua rule itu sama-sama berlaku — yang satu bilang hitam, yang satu bilang biru. Lalu mana yang menang? Nah, inilah inti dari kata “Cascading” di CSS, dan jawabannya bertumpu pada specificity (tingkat kekhususan): selector yang lebih spesifik akan mengalahkan yang kurang spesifik.
Urutannya kira-kira begini, dari yang paling lemah sampai paling kuat:
- Selector element (
p,h1) — paling tidak spesifik. - Selector class (
.intro,:hover) — lebih spesifik. - Selector id (
#header) — paling spesifik.
Jadi pada contoh tadi, .intro (sebuah class) menang atas p (sebuah element), dan paragrafnya pun jadi biru. Class memang lebih spesifik daripada tag, makanya class yang menang.
Kalau dua rule seri, yang ditulis belakangan menang
Kalau dua selector punya specificity yang sama persis, maka yang ditulis lebih belakang di CSS-lah yang menang. Jadi saat specificity-nya seimbang, urutan penulisan jadi penentu. Inilah alasan kenapa kamu kadang merasa sebuah style “kok nggak ngefek” — ternyata ada rule lain dengan specificity setara atau lebih tinggi yang menimpanya. Pokoknya kalau ada style yang ngotot nggak mau muncul, penyebabnya hampir selalu cascade: ada yang lebih spesifik, atau ada yang ditulis belakangan, yang sedang menang. Paham satu konsep ini saja sudah menghemat berjam-jam waktumu dari kebingungan.
Ada juga !important, yaitu cara memaksa satu declaration menang tanpa peduli specificity. Sebisa mungkin hindari ini. !important itu ibarat palu godam yang malah bikin style-mu susah diatur, dan kalau kamu sampai sering mengandalkannya, itu biasanya pertanda ada bagian di selector-mu yang perlu kamu rancang ulang.
Penutup
Selector adalah jantungnya CSS, dan sekarang kamu sudah bisa menargetkan elemen dengan presisi:
- Selector element (
p) menata semua elemen dari satu jenis — pas buat default yang umum. - Selector class (
.intro) menata elemen apa pun yang punya class itu — senjata andalanmu sehari-hari. - Selector id (
#header) menata satu elemen unik — tapi untuk menata, dahulukan class. - Kelompokkan selector dengan koma, dan gabungkan dengan spasi (descendant) atau tanpa spasi (cocok keduanya) supaya lebih presisi.
- Pseudo-class seperti
:hoverdan:focusmenata elemen berdasarkan keadaannya — interaktif tanpa perlu JavaScript. - Cascade yang menentukan rule mana yang menang, berpatokan pada specificity (id > class > element), dan kalau seri, rule yang ditulis belakangan jadi pemenangnya.
Begitu kamu kuasai selector, kamu bisa menempelkan style tepat di tempat yang kamu inginkan — dan itu sudah jadi sebagian besar dari “perjuangan” di CSS. Berikutnya, kita masuk ke salah satu bagian menata yang paling seru: warna dan background — mulai dari beragam cara menentukan warna, sampai cara mengisi elemen dengan warna polos, gradien, dan gambar.
