Hari 6: CSS Selector Kombinasi – Belajar CSS From Zero to Hero

by

Pahami CSS kombinasi selector (descendant, child, adjacent, sibling) untuk menargetkan elemen HTML lebih spesifik. Lengkap dengan contoh, studi kasus, dan latihan.

Hari 6: CSS Selector Kombinasi – Belajar CSS From Zero to Hero

Apa Itu CSS Selector Kombinasi?

Setelah memahami selector dasar (tag, class, dan ID), langkah berikutnya adalah mengenal CSS selector kombinasi. Selector kombinasi memungkinkan kita memilih elemen HTML dengan lebih spesifik berdasarkan hubungan antar elemen.

Bayangkan HTML sebagai sebuah pohon keluarga. Dengan selector kombinasi, kita bisa memilih “anak”, “cucu”, atau “saudara” dari sebuah elemen tertentu.

Jenis-Jenis CSS Selector Kombinasi

1. Descendant Selector (A B)

Memilih semua elemen B yang berada di dalam elemen A.
Contoh:

div p {
  color: blue;
}

HTML:

<div>
  <p>Paragraf ini berwarna biru</p>
</div>
<p>Paragraf ini tidak terkena style</p>

Hasil: hanya <p> di dalam <div> yang terkena style.

2. Child Selector (A > B)

Memilih elemen B yang merupakan anak langsung dari elemen A.
Contoh:

div > p {
  color: green;
}

HTML:

<div>
  <p>Anak langsung div</p>
  <span>
    <p>Cucu div, tidak terkena style</p>
  </span>
</div>

Hasil: hanya <p> anak langsung dari <div> yang berubah warna.

3. Adjacent Sibling Selector (A + B)

Memilih elemen B yang tepat berada setelah elemen A.
Contoh:

h1 + p {
  font-weight: bold;
}

HTML:

<h1>Judul</h1>
<p>Paragraf tepat setelah h1 (bold)</p>
<p>Paragraf ini tidak bold</p>

Hasil: hanya paragraf pertama setelah <h1> yang menjadi bold.

4. General Sibling Selector (A ~ B)

Memilih semua elemen B yang merupakan saudara dari elemen A.
Contoh:

h2 ~ p {
  color: red;
}

HTML:

<h2>Subjudul</h2>
<p>Paragraf pertama setelah h2 (merah)</p>
<p>Paragraf kedua setelah h2 (merah)</p>

Hasil: semua paragraf setelah <h2> berubah merah.

Studi Kasus: Styling Artikel Blog

HTML:

<article>
  <h1>Judul Artikel</h1>
  <p>Paragraf pengantar artikel.</p>
  <section>
    <h2>Subjudul</h2>
    <p>Isi subjudul pertama.</p>
    <p>Isi subjudul kedua.</p>
  </section>
</article>

CSS:

article p {
  color: #333;
}

section > p {
  font-style: italic;
}

h1 + p {
  font-weight: bold;
}

Penjelasan:

  • Semua paragraf dalam <article> akan berwarna abu-abu gelap.
  • Paragraf anak langsung dari <section> ditulis miring.
  • Paragraf setelah <h1> otomatis bold.

Kesalahan Umum Pemula

  1. Keliru antara descendant dan child selector
    • div p → semua <p> di dalam <div> (termasuk cucu).
    • div > p → hanya <p> anak langsung <div>.
  2. Mengira adjacent selector berlaku untuk semua saudara
    • h1 + p hanya paragraf pertama setelah <h1>.
    • Gunakan h1 ~ p untuk semua paragraf setelah <h1>.

Tips Menggunakan Selector Kombinasi

  • Gunakan descendant selector untuk styling umum dalam suatu kontainer.
  • Gunakan child selector saat ingin lebih spesifik.
  • Gunakan adjacent atau general sibling untuk menambahkan style pada elemen yang berdekatan.
  • Jangan membuat selector terlalu rumit, cukup jelas agar mudah dipelihara.

Latihan Praktis Hari 6

  1. Buat HTML dengan struktur:
    • <div> berisi <h1> dan beberapa <p>.
    • <section> berisi <h2> dan beberapa <p>.
  2. Gunakan CSS untuk:
    • Mengubah warna semua <p> dalam <div>.
    • Membuat paragraf anak langsung <section> miring.
    • Membuat paragraf setelah <h1> bold.

Referensi Belajar

Rencana Belajar Selanjutnya

Hari ini kita mempelajari CSS Selector Kombinasi. Besok, kita akan melangkah ke Hari 7: CSS Grouping Selector, agar kode CSS lebih ringkas dan efisien.
👉 Lanjut ke Hari 7: CSS Grouping Selector

Kesimpulan

  • CSS selector kombinasi membuat pemilihan elemen lebih spesifik.
  • Ada 4 jenis utama: descendant (A B), child (A > B), adjacent (A + B), sibling (A ~ B).
  • Selector kombinasi membantu menjaga kode CSS lebih rapi dan terstruktur.

🔥 Tantangan Hari 6:
Buatlah halaman artikel sederhana lalu terapkan minimal 3 jenis selector kombinasi (descendant, child, sibling). Bagikan hasilnya di GitHub atau media sosial dengan hashtag #BelajarCSS.

Leave a Comment