Selector: memilih siapa yang didandani

Di pelajaran 1 kamu menulis h1 { color: red; }, artinya semua h1. Tapi sering kita ingin sebagian saja: hanya kartu ini, hanya link itu. Di situlah selectorSelectorBagian CSS yang menunjuk elemen mana yang mau didandani, misalnya h1 atau .kartu.Penjelasan lengkap → bekerja: ia memilih elemen mana yang kena aturan.

Dan di sinilah id dan class dari pelajaran HTML 7 akhirnya terpakai.

Tiga selector utama

Perhatikan tanda di depannya: titik untuk class, pagar # untuk id, tanpa tanda untuk tag.

Dalam HTML, satu elemen boleh punya beberapa class sekaligus, dipisah spasi:

<li class="favorit pedas">Seblak</li>

Dan classClassNama kelompok yang bisa ditempelkan ke banyak elemen, supaya semuanya didandani sama oleh CSS.Penjelasan lengkap → boleh dipakai berkali-kali, sedangkan id harus unik: satu halaman, satu pemilik.

Coba sendiri

Daftar makanan di bawah belum didandani. Ikuti tiga tantangan, urut dari yang paling umum ke yang paling spesifik.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Selector</title>
  <style>
    /* Tantangan 1: semua li warnanya biru (selector tag) */
    /* Tantangan 2: yang punya class="favorit" dikasih latar kuning (#fff3a3) (selector class) */
    /* Tantangan 3: yang punya id="juara" dikasih huruf tebal (selector id) */
  </style>
</head>
<body>
  <h2>Makanan favorit</h2>
  <ul>
    <li>Nasi goreng</li>
    <li class="favorit">Bakso</li>
    <li class="favorit">Mie ayam</li>
    <li id="juara" class="favorit">Sate</li>
  </ul>
</body>
</html>

Perhatikan: Sate punya class favorit dan id juara, jadi kena aturan dari tiga selector sekaligus. Wajar, itu tidak bertabrakan karena masing-masing mengatur properti yang berbeda.

Kalau dua aturan bertabrakan

Bagaimana kalau dua aturan mengatur properti yang sama?

li { color: blue; }
.favorit { color: red; }

Aturan yang menang adalah yang lebih spesifik. Urutannya dari lemah ke kuat: tag, lalu class, lalu id. Jadi <li class="favorit"> tampil merah. Kalau kekuatannya sama, yang ditulis belakangan menang.

Dua trik berguna

Satu aturan untuk beberapa selector, pisah dengan koma:

h1, h2, h3 {
  color: #0a66c2;
}

Memilih elemen di dalam elemen lain, pisah dengan spasi:

.kartu p {
  margin: 0;
}

Artinya: hanya p yang berada di dalam elemen ber-class kartu. Pola ini dipakai di CV-mu nanti.