Selector Dasar: Elemen, Class, dan ID

Memilih elemen yang tepat: selector tag, class (.), id (#), universal (*), dan pengelompokan dengan koma.

Part 2 dari 25 ± 35 menit Gratis

Selector: cara "menunjuk" elemen

Sebelum mengubah tampilan, kamu harus bisa memilih elemen yang tepat. Itulah tugas selector. Ada empat selector paling dasar.

Selector	Contoh	Memilih
Elemen (tag)	`p`	Semua elemen `<p>`
Class	`.penting`	Semua elemen ber-`class="penting"`
ID	`#judul`	Satu elemen ber-`id="judul"`
Universal	`*`	Semua elemen

Selector elemen

p { color: gray; }
a { text-decoration: none; }

Selector class (titik)

Class adalah yang paling sering dipakai. Sebuah class bisa dipasang pada banyak elemen, dan satu elemen boleh punya banyak class.

<p class="penting">Teks ini penting.</p>
<p class="penting tebal">Penting dan tebal.</p>

.penting { color: red; }
.tebal   { font-weight: bold; }

Selector ID (pagar)

ID harus unik; cocok untuk elemen yang benar-benar satu-satunya di halaman, seperti #header-utama. Dalam praktik, banyak developer memilih class untuk styling dan memakai id hanya untuk tautan anchor atau JavaScript.

#judul { text-align: center; }

Selector gabungan

Elemen dengan class tertentu: tulis tanpa spasi.

p.penting { color: red; }    /* hanya <p> yang punya class penting */

Mengelompokkan beberapa selector dengan koma agar berbagi satu aturan:

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

Selector universal

* {
  margin: 0;
  padding: 0;
}

Dipakai untuk menghapus jarak bawaan browser pada semua elemen (sering disebut reset).

Memilih nama class yang baik

Gunakan huruf kecil dan tanda hubung: .kartu-produk.
Nama menjelaskan fungsi, bukan tampilan: .peringatan lebih baik daripada .merah (kalau nanti diganti biru, namanya jadi bohong).