Selector CSS

Selector CSS 🎯

Selector adalah bagian paling penting dari CSS — ini adalah cara kita memilih elemen HTML mana yang ingin diberi gaya. Menguasai selector berarti menguasai fondasi seluruh CSS.

1. Element Selector

Memilih semua elemen HTML berdasarkan nama tag-nya:

p {
  color: #374151;
  font-size: 16px;
}

h1 {
  color: #1d4ed8;
}

a {
  color: #7c3aed;
}

Semua <p>, semua <h1>, dan semua <a> di seluruh halaman akan terkena gaya tersebut.

2. Class Selector

Memilih elemen berdasarkan atribut class. Diawali dengan tanda titik (.):

<p class="teks-merah">Paragraf pertama.</p>
<p>Paragraf biasa.</p>
<p class="teks-merah">Paragraf ketiga.</p>

.teks-merah {
  color: red;
  font-weight: bold;
}

Hanya paragraf dengan class="teks-merah" yang terpengaruh. Class bisa dipakai oleh banyak elemen sekaligus dan satu elemen bisa punya banyak class:

<p class="teks-besar teks-biru">Punya dua class sekaligus.</p>

.teks-besar { font-size: 24px; }
.teks-biru  { color: blue; }

3. ID Selector

Memilih elemen berdasarkan atribut id. Diawali dengan tanda pagar (#). ID harus unik — hanya boleh ada satu elemen dengan ID yang sama per halaman:

<div id="header">Ini header utama.</div>

#header {
  background-color: #1d4ed8;
  color: white;
  padding: 20px;
}

4. Universal Selector

Memilih semua elemen di halaman. Ditulis dengan tanda bintang (*):

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Paling umum digunakan sebagai CSS reset — menghapus gaya default browser sebelum menambahkan gaya sendiri.

5. Attribute Selector

Memilih elemen berdasarkan atribut atau nilai atributnya:

/* Semua input dengan type="text" */
input[type="text"] {
  border: 1px solid #ccc;
  padding: 8px;
}

/* Semua link yang href-nya mengandung "google" */
a[href*="google"] {
  color: #4285f4;
}

/* Semua gambar yang src-nya diawali dengan "https" */
img[src^="https"] {
  border: 2px solid green;
}

6. Pseudo-class Selector

Memilih elemen berdasarkan kondisi atau state tertentu. Ditulis dengan tanda titik dua (:):

/* Saat link diarahkan mouse */
a:hover {
  color: red;
  text-decoration: underline;
}

/* Saat input sedang aktif/diklik */
input:focus {
  outline: 2px solid #3b82f6;
}

/* Elemen li pertama dalam daftarnya */
li:first-child {
  font-weight: bold;
}

/* Elemen li terakhir */
li:last-child {
  border-bottom: none;
}

/* Elemen li ganjil (1, 3, 5, ...) */
li:nth-child(odd) {
  background-color: #f3f4f6;
}

7. Combinator Selector

Menggabungkan selector untuk memilih elemen berdasarkan hubungannya:

/* Descendant: semua <p> di dalam <div> (di semua level) */
div p {
  color: gray;
}

/* Child: hanya <p> langsung di bawah <div> */
div > p {
  font-weight: bold;
}

/* Adjacent sibling: <p> yang langsung setelah <h1> */
h1 + p {
  font-size: 18px;
}

/* General sibling: semua <p> yang sesudah <h1> (level sama) */
h1 ~ p {
  color: #555;
}

Menggabungkan Beberapa Selector

Gunakan koma (,) untuk menerapkan gaya yang sama ke banyak selector sekaligus:

h1, h2, h3 {
  font-family: 'Georgia', serif;
  color: #111;
}

.tombol-primer, .tombol-sekunder {
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
}

Spesifisitas Selector

Ketika dua selector menarget elemen yang sama, CSS memilih berdasarkan spesifisitas (kekhususan):

p           { color: gray; }    /* spesifisitas: 1 */
.teks       { color: blue; }    /* spesifisitas: 10 — menang */
#unik       { color: red; }     /* spesifisitas: 100 — menang */

💡 Tips: Biasakan menggunakan class selector untuk sebagian besar styling. Hindari terlalu banyak menggunakan ID selector karena spesifisitasnya tinggi dan susah di-override. Universal selector gunakan hanya untuk CSS reset di awal file.