Selector Dasar

Aturan CSS dapat ditulis sebaik apa pun, tetapi tidak berguna bila menyar elemen yang keliru. Selector adalah bagian kiri aturan CSS yang menyatakan elemen mana yang diberi gaya, dan pilihan selector menentukan seberapa presisi gaya itu menempel. Pada Chapter ini kita mempelajari selector paling sering dipakai: element, class, ID, kombinasi descendant, serta dua pseudo-class populer. Kita juga menyinggung specificity, yakni aturan penentu pemenang ketika beberapa selector menyasar elemen yang sama.

Anatomi Satu Aturan CSS #

Sebelum masuk ke jenis selector, mari kita sepakati anatomi aturan CSS:

p {
  color: #1f2937;
}

Bagian p sebelum kurung kurawal adalah selector. Di dalam kurung terdapat blok deklarasi berisi pasangan properti dan nilai, dalam contoh ini properti color bernilai #1f2937. Seluruh kesatuan tersebut disebut aturan (rule), dan satu file CSS biasanya memuat banyak aturan yang saling melengkapi.

Selector Element, Class, dan ID #

Tiga selector dasar menyasar elemen dengan cara berbeda. Selector element menyasar semua elemen dengan nama tag tertentu, selector class menyasar semua elemen yang berlabel class tertentu, dan selector ID menyasar satu elemen yang ber-id tertentu.

Dalam penulisannya, selector class diawali titik dan selector ID diawali tanda pagar. Karena nilai id wajib unik dalam satu halaman, selector ID selalu menyasar satu elemen saja, sedangkan class dapat dipakai ulang sebanyak yang kita perlukan.

Kombinasi Descendant #

Dua atau lebih selector yang ditulis berurutan membentuk kombinasi descendant: elemen yang disasar adalah keturunan dari selector sebelumnya.

nav a {
  color: #1a6b54;
}

Aturan di atas menyasar setiap a yang berada di dalam nav, tanpa peduli berapa tingkat kedalamannya. Link di luar nav tidak terkena sama sekali. Kombinasi ini memungkinkan kita mengatur gaya per area halaman, misalnya link navigasi berbeda dengan link di dalam artikel.

Pseudo-class :hover dan :focus #

Pseudo-class menambahkan kondisi pada selector sehingga gaya hanya aktif pada keadaan tertentu. Selector a:hover aktif ketika kursor berada di atas link, sedangkan a:focus aktif ketika link menerima fokus, misalnya lewat tombol Tab pada keyboard. Satu catatan dari materi accessibility kita: gaya fokus justru dibutuhkan agar pengguna keyboard mengetahui posisi berada, sehingga jangan dibuat samar atau dibuang.

Specificity secara Ringkas #

Ketika dua aturan menyasar elemen yang sama dengan properti yang sama, CSS memilih pemenang lewat specificity. Urutannya ringkas begini: inline menimpa semuanya, kemudian ID, lalu class, dan terakhir element. Bila dua aturan setara, aturan yang ditulis belakangan menang. Pola ini alasan class menjadi pilihan utama: cukup spesifik untuk dibedakan, tetapi tetap mudah ditimpa bila diperlukan.

Contoh CSS Menyasar Berbagai Elemen #

Contoh berikut memakai keempat jenis selector sekaligus pada satu halaman menu kantin:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Menu Kantin Siti</title>
  <link rel="stylesheet" href="contoh-selector.css">
</head>
<body>
  <header id="utama">
    <h1>Menu Kantin Siti</h1>
  </header>
  <nav>
    <a href="#makanan">Makanan</a>
    <a href="#minuman">Minuman</a>
  </nav>
  <p class="berjalan">Menu berubah setiap Jumat pagi.</p>
  <p>Hubungi kantin untuk pesanan besar.</p>
</body>
</html>

body {
  font-family: sans-serif;
}

#utama {
  background-color: #1a6b54;
}

#utama h1 {
  color: #ffffff;
}

nav a {
  color: #1a6b54;
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}

.berjalan {
  color: #6b7280;
}

p {
  color: #1f2937;
}

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Header dengan latar hijau dan judul putih di dalamnya
  - Dua link navigasi berwarna hijau tanpa garis bawah
  - Garis bawah muncul pada link saat kursor berada di atasnya
  - Paragraf "Menu berubah setiap Jumat pagi." berwarna abu-abu
  - Paragraf terakhir berwarna gelap

Mari kita telaah peran setiap baris penting di atas:

1. Baris 5-7 CSS (#utama): selector ID yang memberi latar hijau pada header.
2. Baris 9-11 CSS (#utama h1): kombinasi descendant yang menyasar judul di dalam header, lalu memutihkannya.
3. Baris 13-16 CSS (nav a): descendant yang mewarnai link navigasi dan menghilangkan garis bawahnya.
4. Baris 18-20 CSS (nav a:hover): pseudo-class yang memunculkan kembali garis bawah saat kursor di atas link.
5. Baris 22-24 CSS (.berjalan): selector class yang mewarnai paragraf pemberitahuan dengan abu-abu.
6. Baris 26-28 CSS (p): selector element yang memberi warna dasar semua paragraf.
7. Hubungan .berjalan dan p: kedua aturan sama-sama menyasar paragraf pemberitahuan; class lebih spesifik sehingga warna abu-abu yang tampil.

Contoh di atas menunjukkan bahwa pemilihan selector sama pentingnya dengan deklarasi gaya. Chapter berikutnya mulai mengisi deklarasi tersebut dengan materi paling sering dipakai, yaitu warna dan latar belakang.

Referensi resmi untuk pendalaman:

• MDN Web Docs — CSS selectors
• MDN Web Docs — Pseudo-classes
• MDN Web Docs — Specificity

body {
  font-family: sans-serif;
}

#utama {
  background-color: #1a6b54;
}

#utama h1 {
  color: #ffffff;
}

nav a {
  color: #1a6b54;
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}

.berjalan {
  color: #6b7280;
}

p {
  color: #1f2937;
}

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Menu Kantin Siti</title>
  <link rel="stylesheet" href="contoh-selector.css">
</head>
<body>
  <header id="utama">
    <h1>Menu Kantin Siti</h1>
  </header>
  <nav>
    <a href="#makanan">Makanan</a>
    <a href="#minuman">Minuman</a>
  </nav>
  <p class="berjalan">Menu berubah setiap Jumat pagi.</p>
  <p>Hubungi kantin untuk pesanan besar.</p>
</body>
</html>