Di artikel sebelumnya, Anda sudah kenal dengan selector dasar — element, class, dan ID. Sekarang saatnya naik level.

CSS punya cara-cara lebih spesifik untuk memilih elemen. Ada yang bisa pilih elemen berdasarkan atribut HTML, ada yang bisa pilih kondisi tertentu (misal saat mouse hover), dan ada yang bisa target bagian dalam elemen tanpa ubah HTML-nya.

Di artikel ini, kita akan bahas: attribute selector, pseudo-class, pseudo-element, combinators, dan specificity — semua yang dibutuhkan untuk jadi lebih mahir di CSS.

1. Attribute Selector

Attribute selector memungkinkan Anda memilih elemen berdasarkan atribut HTML-nya, bukan cuma tag atau class. Ini berguna banget saat Anda punya banyak elemen dengan atribut berbeda.

Memilih berdasarkan keberadaan atribut

a[target] {
  color: #ef4444;
}

Semua link <a> yang punya atribut target bakal berwarna merah. Yang tanpa target tetap default.

Memilih berdasarkan nilai atribut

a[target="_blank"] {
  color: #ef4444;
}

Sekarang hanya link dengan target="_blank" yang kena. Yang lain tetap aman.

Pencocokan parsial

/* Mulai dengan: href dimulai dari https */
a[href^="https"] {
  color: #22c55e;
}

/* Berakhir dengan: href berakhir dari .pdf */
a[href$=".pdf"] {
  color: #f97316;
}

/* Mengandung: href mengandung "github" */
a[href*="github"] {
  color: #8b5cf6;
}

Kapan pakai? Attribute selector berguna saat Anda punya banyak elemen dengan atribut serupa tapi nilainya beda. Misal styling semua form input berdasarkan type-nya:

input[type="text"] {
  border: 2px solid #d1d5db;
}

input[type="password"] {
  border: 2px solid #ef4444;
}

input[type="email"] {
  border: 2px solid #3b82f6;
}

---

2. Pseudo-Class Selector

Pseudo-class memilih elemen berdasarkan kondisi atau state tertentu — bukan berdasarkan atribut HTML, tapi kondisi runtime seperti hover, focus, atau urutan dalam daftar.

Syntax

selector:pseudo-class {
  property: value;
}

Perhatikan titik dua (:) — ini yang membedakan pseudo-class dari selector biasa.

Pseudo-class interaktif

/* Saat mouse hover */
a:hover {
  color: #3b82f6;
  text-decoration: underline;
}

/* Saat input sedang di-focus */
input:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Saat tombol diklik */
button:active {
  transform: scale(0.95);
}

/* Saat link sudah dikunjungi */
a:visited {
  color: #8b5cf6;
}

Catatan: Urutan pseudo-class interaktif ini penting: :link → :visited → :hover → :active. Kalau salah urutan, style yang salah bisa menang.

Pseudo-class structural

/* Elemen pertama dalam parent */
li:first-child {
  font-weight: 700;
}

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

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

/* Elemen genap (2, 4, 6, ...) */
tr:nth-child(even) {
  background-color: #ffffff;
}

/* Elemen ke-3 */
li:nth-child(3) {
  color: #ef4444;
}

Pseudo-class negasi dan pengelompokan

/* Semua kecuali yang pertama */
li:not(:first-child) {
  margin-top: 0.5rem;
}

/* Gabungan: link di dalam nav yang hover */
nav a:hover {
  color: #f97316;
}

---

3. Pseudo-Element Selector

Pseudo-element memilih bagian spesifik dari elemen — bukan keseluruhan elemen, tapi potongan tertentu seperti huruf pertama, baris pertama, atau konten sebelum/sesudah elemen.

Syntax

selector::pseudo-element {
  property: value;
}

Perhatikan dua titik dua (::) — ini yang membedakan pseudo-element dari pseudo-class.

::before dan ::after

Ini yang paling sering dipake. Pseudo-element ini menambahkan konten virtual ke elemen.

.quote::before {
  content: "\201C";  /* Tanda kutip pembuka */
  font-size: 3rem;
  color: #d1d5db;
  margin-right: 0.5rem;
}

.quote::after {
  content: "\201D";  /* Tanda kutip penutup */
  font-size: 3rem;
  color: #d1d5db;
  margin-left: 0.5rem;
}

<p class="quote">CSS itu menyenangkan kalau sudah paham dasarnya.</p>

Hasilnya: teks dikutip dengan tanda kutip yang otomatis ditambahkan tanpa ubah HTML.

Contoh lain: menambahkan ikon

.link-external::after {
  content: " ↗";
  font-size: 0.8em;
}

Setiap link dengan class link-external otomatis dapat tanda panah di belakang teks.

::first-letter dan ::first-line

/* Huruf pertama lebih besar */
p.intro::first-letter {
  font-size: 3rem;
  font-weight: 700;
  float: left;
  margin-right: 0.5rem;
  line-height: 1;
}

/* Baris pertama lebih tebal */
p.intro::first-line {
  font-weight: 600;
  text-transform: uppercase;
}

::selection

Mengontrol warna saat user menyeleksi teks:

::selection {
  background-color: #3b82f6;
  color: white;
}

---

4. Combinators

Combinators menghubungkan dua atau lebih selector untuk memilih elemen berdasarkan hubungan mereka di dalam DOM. Ini yang bikin CSS jadi powerful — bisa target elemen dengan presisi tinggi.

Descendant selector (spasi)

Memilih semua elemen di dalam parent, tidak peduli seberapa dalam:

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

Semua <a> di dalam <nav> — entah langsung di dalam atau di dalam <ul>, <li>, atau elemen lain — bakal kena style ini.

Child selector (>)

Memilih elemen langsung di dalam parent, tanpa peduli yang lebih dalam:

nav > a {
  text-decoration: none;
  color: #374151;
}

Hanya <a> yang merupakan anak langsung <nav> yang kena. Yang ada di dalam <ul> atau <li> tetap default.

Adjacent sibling (+)

Memilih elemen yang langsung setelah elemen lain:

h2 + p {
  font-size: 1.1rem;
  color: #6b7280;
}

Hanya <p> yang langsung setelah <h2> yang kena. Kalau ada elemen lain di antara mereka, style ini tidak berlaku.

General sibling (~)

Memilih semua elemen setelah elemen lain, tidak harus langsung:

h2 ~ p {
  color: #6b7280;
}

Semua <p> yang muncul setelah <h2> di dalam parent yang sama bakal kena — entah langsung setelahnya atau beberapa elemen setelahnya.

Perbandingan Combinators

Combinator	Simbol	Arti
Descendant	spasi	Semua keturunan di dalam parent
Child	>	Anak langsung
Adjacent sibling	+	Saudara langsung setelah
General sibling	~	Semua saudara setelah

---

5. Specificity

Specificity adalah sistem penentuan siapa yang menang ketika dua atau lebih selector menarget elemen yang sama. Kalau selector punya spesifisitas yang sama, yang didefinisikan terakhir menang.

Urutan Specificity (dari rendah ke tinggi)

1. Element & Pseudo-element (p, h1, ::before)       → 0,0,1
2. Class, Pseudo-class, Attribute (.highlight, :hover) → 0,1,0
3. ID (#hero)                                          → 1,0,0
4. Inline style (style="...")                          → 1,0,0,0
5. !important                                          → Override semua

Contoh Konkret

p { color: black; }              /* Specificity: 0,0,1 */
.text { color: blue; }           /* Specificity: 0,1,0 */
#intro { color: red; }           /* Specificity: 1,0,0 */

<p id="intro" class="text">Teks ini berwarna apa?</p>

Jawabannya: merah — karena ID selector (#intro) punya spesifisitas paling tinggi.

Menghitung Specificity

Specificity dihitung dalam format (ID, class/attr, element):

/* 0, 0, 1 → element saja */
p { color: black; }

/* 0, 1, 0 → class saja */
.text { color: blue; }

/* 0, 1, 1 → class + element */
p.text { color: green; }

/* 1, 0, 0 → ID saja */
#intro { color: red; }

/* 1, 1, 1 → ID + class + element */
p.text#intro { color: purple; }

Yang terakhir (p.text#intro) menang — spesifisitasnya (1,1,1) adalah yang tertinggi.

Hindari !important

/* ❌ Jangan lakukan ini */
.urgent {
  color: red !important;
}

/* ✅ Lebih baik: tingkatkan spesifisitas */
.sidebar .urgent {
  color: red;
}

!important memang meng-override semuanya, tapi bikin CSS susah di-maintain. Kalau banyak !important di CSS, Anda bakal kesusahan debug nantinya.

Tips Mengelola Specificity

1. Gunakan class selector — paling sering dipake, cukup spesifik, dan reusable
2. Hindari ID selector di CSS — kecuali benar-benar hanya ada satu elemen seperti
3. Jangan nesting berlebihan — div.container ul li a span bikin spesifisitas melambung
4. Satu level nesting saja — cukup nav a atau .card .title

---

Recap

Konsep	Penjelasan Singkat
Attribute Selector	Pilih berdasarkan atribut HTML ([type="text"])
Pseudo-Class	Pilih berdasarkan kondisi (:hover, :nth-child)
Pseudo-Element	Target bagian elemen (::before, ::first-letter)
Descendant (spasi)	Semua keturunan di dalam parent
Child (>)	Anak langsung
Adjacent Sibling (+)	Saudara langsung setelah
General Sibling (~)	Semua saudara setelah
Specificity	Sistem penentuan siapa yang menang
Urutan	Element < Class/Attr < ID < Inline < !important

---

Penutup

Selector dan properties adalah inti dari CSS. Dengan attribute selector, pseudo-class, pseudo-element, dan combinators, Anda bisa menarget elemen dengan presisi tinggi tanpa harus spam class di HTML.

Specificity juga penting dipahami — kalau style CSS tidak berjalan seperti yang diharapkan, kemungkinan ada selector lain yang punya spesifisitas lebih tinggi.

Di artikel selanjutnya, kita akan bahas Box Model — konsep dasar yang menentukan bagaimana elemen mengambil ruang di halaman.

---