CSS Selector & Specificity – Belajar CSS Part 2

Setelah mempelajari CSS Dasar di Part 1, sekarang kita masuk ke materi yang lebih mendalam: CSS Selector & Specificity.

Di Part 2 ini, kamu akan belajar tentang:

Bagaimana cara memilih elemen HTML dengan CSS
Jenis selector yang tersedia
Konsep specificity dan bagaimana CSS menentukan prioritas aturan

Daftar Isi

Apa Itu CSS Selector?

Selector adalah bagian dari CSS yang digunakan untuk memilih elemen HTML yang ingin diubah tampilannya.

Contoh dasar:

h1 {
  color: blue;
}
.merah {color: red;}
#hijau {color: green;}

h1 → selector elemen (semua h1 biru)
.merah → selector class
#hijau → selector id (unik)

Dalam contoh ini, h1 adalah selector yang memilih semua elemen <h1> pada halaman HTML.

Jenis-Jenis CSS Selector

1. Universal Selector

Selector universal * memilih semua elemen di halaman.

Kapan Universal Selector Digunakan?

Universal selector sering dipakai untuk:

Mengatur style dasar seluruh halaman
Reset margin dan padding bawaan browser
Memberi style global

* {
  margin: 0;
  padding: 0;
  color: red;
  font-family: Arial, sans-serif;
}

Selector * memilih semua elemen
Semua margin, padding. jarak ke luar dan ke dalam reset ke 0
Semua teks menjadi merah
Semua elemen memakai font Arial

Catatan: Jangan terlalu sering memakai universal selector untuk style berat karena bisa mempengaruhi performa halaman.

2. Type Selector (Element Selector)

Selector tipe memilih elemen berdasarkan nama tag HTML.

h1 {
  color: blue;
}
p {font-size: 16px;}

Selector h1 mengubah semua judul
Selector p mengubah semua paragraf
Tidak perlu menambahkan class atau id

Catatan: Type selector cocok untuk pengaturan umum. Jika ingin mengatur elemen tertentu saja, gunakan class atau id.

3. Class Selector

Selector kelas memilih elemen yang memiliki atribut class tertentu.

.button {
  background-color: #87CEEB;
  padding: 10px;
  border: none;
  font-size: 16px;
}

.teks-merah {
  color: red;
}

.button dipakai untuk dua tombol sekaligus
Class bisa digunakan ulang di banyak elemen
.teks-merah mengubah warna paragraf

Catatan: Satu elemen bisa punya lebih dari satu class:

Untuk menggunakan class, kita menambahkan tanda titik (.) sebelum nama class.

4. ID Selector

Selector ID memilih elemen berdasarkan atribut id yang unik.
Untuk menggunakan ID, kita menambahkan tanda pagar (#) sebelum nama ID.

Elemen dengan id="header" akan memiliki:

background hitam
teks putih
jarak dalam (padding) 10px
teks rata tengah

#header {
background-color: black;
color: white;
padding: 10px;
text-align: center;
}

Penjelasan Sederhana

#header = memilih elemen dengan id "header"
ID bersifat unik (tidak boleh dipakai berulang)
Cocok untuk bagian penting seperti header, footer, atau menu utama

Catatan penting:

Gunakan class untuk style yang dipakai berulang
Gunakan id untuk elemen yang unik

5. Descendant Selector

Selector keturunan memilih elemen yang berada di dalam elemen lain.

div p {
  color: green;
}

Ini memilih elemen <p> yang berada dalam elemen <div>.

Paragraf di dalam <div> → hijau
Paragraf di luar <div> → warna normal
Selector bekerja berdasarkan struktur HTML

CSS Specificity: Memahami Prioritas Aturan

Specificity adalah cara CSS memutuskan aturan mana yang akan diterapkan pada elemen.

Aturan dengan specificity lebih tinggi akan menggantikan aturan dengan specificity lebih rendah.

Jika dua aturan memiliki specificity yang sama, aturan yang ditulis terakhir di stylesheet yang akan diterapkan.

Formula Specificity

Specificity dihitung berdasarkan:

Inline styles – 1000
ID selectors – 100
Class selectors, attributes, pseudo-classes – 10
Element selectors, pseudo-elements – 1

Di sini, meskipun kedua selector digunakan, #header akan menang karena memiliki specificity lebih tinggi.

Contoh lengkapnya bisa di lihat dibawah ini:

/* ID Selector: Specificity 100 */
#header {
  background-color: black;
  color: white; /* Teks dalam #header akan berwarna putih */
}

/* Element Selector: Specificity 2 */
div p {
  color: green; /* Teks dalam div p akan berwarna hijau */
}

/* ID Selector + Element Selector: Specificity 101 */
#header div p {
  color: blue; /* Teks dalam #header div p akan berwarna biru */
}

/* Inline styles: Specificity 1000 */
p {
  color: red;  /* Gaya default */
}

/* Class Selector: Specificity 10 */
.highlight {
  background-color: yellow;
}

Aturan Penting Specificity

Nilai lebih besar menang
Jika nilainya sama → aturan yang ditulis terakhir yang dipakai
Inline style hampir selalu menang

Kesalahan Umum dengan Selector

Menambahkan selector yang terlalu spesifik (terlalu banyak ID)
Menggunakan * terlalu sering
Menambahkan banyak aturan inline di HTML

Ringkasan CSS Part 2

Selector adalah kunci untuk memilih elemen HTML
Specificity menentukan aturan mana yang diprioritaskan
Gunakan selector dengan bijak untuk membuat kode yang bersih dan efisien

Lanjutan Materi

Di CSS Part 3, kita akan membahas:

CSS Text Styling
Font, warna, dan properti teks lainnya
Penggunaan font dan cara mengaturnya

Lanjut ke: Belajar CSS Part 3

Belajar CSS Part 2: CSS Selector & Specificity