Memahami Selector Lanjutan dan Spesifisitas CSS

Setelah kamu belajar dasar-dasar styling di CSS seperti selector element, .class, dan #id, sekarang saatnya naik level! Di artikel ini, kita akan bahas selector lanjutan yang bisa bikin styling kamu lebih fleksibel dan powerful. Plus, kamu juga akan kenalan sama konsep spesifisitas CSS, biar nggak bingung lagi kalau style “nggak jalan”.

---

1. Selector Lanjutan di CSS

Kombinasi Selector

CSS memungkinkan kita menggabungkan beberapa selector untuk menargetkan elemen dengan lebih spesifik:

• Descendant selector (A B)
  Menargetkan elemen B di dalam A.

  .card p {
    color: gray;
  }

• Child selector (A > B)
  Menargetkan B yang langsung anak dari A.

  ul > li {
    list-style-type: square;
  }

• Adjacent sibling (A + B)
  Menargetkan B yang langsung setelah A.

  h1 + p {
    margin-top: 0;
  }

• General sibling (A ~ B)
  Menargetkan semua B yang bersaudara dengan A.

  h2 ~ p {
    color: green;
  }

---

Attribute Selector

Selector ini menargetkan elemen berdasarkan atributnya:

input[type="text"] {
  border: 1px solid #ccc;
}

a[href^="https"] {
  color: green;
}

Keterangan:

• [attr="value"] → exact match
• [attr^="val"] → mulai dengan
• [attr*="val"] → mengandung

---

Pseudo-class

Selector ini berguna untuk menargetkan state tertentu:

a:hover {
  text-decoration: underline;
}

input:focus {
  outline: 2px solid blue;
}

li:nth-child(odd) {
  background: #f9f9f9;
}

Contoh lainnya: :first-child, :last-child, :not(), dll.

---

Pseudo-element

Digunakan untuk styling bagian tertentu dari elemen:

p::first-line {
  font-weight: bold;
}

.card::before {
  content: "👉 ";
  color: orange;
}

---

2. Spesifisitas CSS: Siapa yang Menang?

Kalau kamu punya beberapa rule yang menargetkan elemen yang sama, spesifisitas akan menentukan siapa yang menang.

Bayangkan nilai spesifisitas seperti skor dengan format a,b,c,d:

• a = inline style (1000)
• b = jumlah ID selector (100)
• c = jumlah class, pseudo-class, attribute selector (10)
• d = jumlah element, pseudo-element (1)

Contoh:

p { color: blue; }                   /* 0,0,0,1 */
.highlight p { color: red; }        /* 0,0,1,1 */
#main .highlight p { color: green; }/* 0,1,1,1 */

Yang menang: hijau, karena punya skor spesifisitas tertinggi.

Inline style:

<p style="color: orange;">Teks</p>

Akan selalu menang, kecuali ada !important yang override.

---

3. !important: Senjata Pamungkas (Tapi Hati-Hati)

p {
  color: blue !important;
}

!important akan mengabaikan spesifisitas dan selalu menang. Tapi jangan sering dipakai! Kalau semuanya penting, sama saja tidak ada yang penting.

Gunakan hanya saat benar-benar perlu, misalnya untuk override style dari library eksternal.

---

Tips & Best Practice

• Gunakan class untuk styling. Hindari terlalu bergantung pada ID.
• Hindari selector yang terlalu spesifik seperti:

  html body div.container .box > h2.title { ... }

• Buat struktur CSS yang mudah diatur dan di-override.
• Gunakan :not() untuk efisiensi:

  button:not(.primary) {
    background: transparent;
  }