CSS Selectors Basic Combinators Pseudo

Ringkasan

Selector menentukan elemen mana yang kena style. Menguasai selector = tulis CSS lebih sedikit & tepat sasaran.

Konsep Dasar

• Type: p, h1 — tag.
• Class: .btn — bisa dipakai banyak.
• ID: #header — satu, spesifik tinggi (hindari untuk style umum).
• Combinator: (descendant), > (child), + (sibling adj), ~ (sibling general).
• Pseudo-class: :hover, :focus, :nth-child(), :not(), :first-child.
• Attribute: [type="text"], [href^="https"].

Cara Kerja / Struktur

css

.card > .title { font-weight: 700; }
li:nth-child(2n) { background: #f3f3f3; }
a:hover { color: blue; }
input[type="email"]:invalid { border-color: red; }

Catatan Implementasi

• Prefer class over ID untuk reuse.
• :nth-child powerful untuk striping/pola tanpa JS.
• Specificity: ID > class > type — baca juga post Specificity & Cascade.

Kesalahan Umum

• Selector terlalu spesifik (susah di-override).
• Lupa > vs (child vs descendant) — beda jangkauan.

Glosarium

• Combinator: penghubung antar selektor.
• Pseudo-class: state/kondisi elemen (bukan elemen nyata).

Referensi

• Specificity dan Cascade