Selektor Dasar CSS

Menargetkan elemen dengan tepat

Selektor adalah cara kamu bilang ke browser: "aturan ini buat elemen yang itu". Salah pilih selektor, style-nya bisa nyasar ke tempat yang tidak diinginkan. Ada empat selektor dasar yang wajib hafal di luar kepala.

1. Selektor elemen

Menargetkan semua elemen dengan tag tertentu. Tulis langsung nama tag-nya.

p {
  line-height: 1.6;
}

Semua paragraf di halaman kena. Sederhana, tapi kadang terlalu luas. Makanya jarang dipakai sendirian untuk styling yang spesifik.

2. Selektor class

Menargetkan elemen yang punya atribut class tertentu. Diawali titik.

<button class="btn">Simpan</button>
<button class="btn btn-danger">Hapus</button>

.btn {
  padding: 10px 20px;
  border-radius: 8px;
}

.btn-danger {
  background: crimson;
  color: white;
}

Satu elemen boleh punya banyak class dipisah spasi. Class bisa dipakai ulang di banyak elemen. Ini selektor yang paling sering kamu pakai sehari-hari.

3. Selektor id

Menargetkan satu elemen unik dengan atribut id. Diawali pagar.

<header id="kepala-situs">...</header>

#kepala-situs {
  background: navy;
}

Satu id hanya boleh dipakai sekali per halaman. Karena sifatnya unik, selektor id punya "kekuatan" yang sangat tinggi dan susah ditimpa. Makanya untuk styling, lebih aman pakai class saja dan simpan id buat kebutuhan JavaScript.

4. Selektor universal

Bintang * menargetkan semua elemen. Paling sering dipakai buat reset kecil.

* {
  box-sizing: border-box;
}

Jangan dipakai buat styling berat karena browser harus mengecek setiap elemen.

Menggabungkan selektor

Beberapa selektor bisa ditulis bareng dipisah koma supaya berbagi aturan yang sama:

h1, h2, h3 {
  font-family: sans-serif;
}

Artinya: ketiga heading itu dapat font yang sama. Hemat baris, gampang dibaca.

Catatan teknis: bedakan button.btn (elemen button yang punya class btn, tanpa spasi) dengan button .btn (elemen class btn yang ada DI DALAM button, pakai spasi). Spasi itu artinya "keturunan", salah satu sumber bug selektor paling umum di pemula.

Rangkuman

Elemen buat aturan umum, class buat styling yang dipakai ulang (favoritmu), id buat elemen unik (lebih baik buat JavaScript), dan universal buat reset. Koma menggabungkan beberapa selektor dalam satu aturan.