Css Selector

Dalam CSS, memilih elemen tidak hanya sebatas menggunakan class atau id. Kamu bisa memilih sebuah elemen berdasarkan posisinya terhadap elemen lain dalam struktur HTML. Ini sering disebut sebagai Combinators, yang memungkinkan kamu membuat aturan yang sangat spesifik tanpa harus menambah banyak class di HTML.

1. Penjelasan

Bayangkan struktur HTML sebagai sebuah pohon keluarga. Ada orang tua (parent), anak (child), dan saudara (sibling). CSS menyediakan empat cara utama untuk menargetkan elemen berdasarkan hubungan ini:

• Descendant Selector (Spasi): Memilih semua elemen di dalam elemen tertentu.
• Child Selector (>): Hanya memilih elemen yang merupakan anak langsung (direct child).
• Adjacent Sibling Selector (+): Memilih satu elemen yang tepat berada setelah elemen lain (adik pertama).
• General Sibling Selector (~): Memilih semua elemen saudara yang muncul setelah elemen tersebut.

2. Sintaksis & Properti

Mari kita lihat perbedaan penulisannya dalam kode:

/* 1. Descendant: Semua <p> di dalam <div> akan berwarna abu-abu */
div p {
  color: gray;
}

/* 2. Child: Hanya <p> yang merupakan anak langsung dari <article> yang akan tebal */
article > p {
  font-weight: bold;
}

/* 3. Adjacent Sibling: Hanya <p> pertama tepat setelah <h1> yang akan berukuran besar */
h1 + p {
  font-size: 1.5rem;
}

/* 4. General Sibling: Semua <p> yang berada setelah <h2> (di level yang sama) akan miring */
h2 ~ p {
  font-style: italic;
}

3. Studi Kasus: Styling Blog Post Layout

Kamu sedang merapikan tampilan artikel blog. Kamu ingin paragraf pertama (lead) terlihat lebih menonjol setelah judul, dan daftar menu di dalam navigasi tetap rapi.

<section class="blog-content">
  <h1>Judul Artikel Keren</h1>
  <p>Ini adalah paragraf intro (lead) yang harusnya lebih besar.</p>
  <p>Ini paragraf biasa yang menjelaskan isi artikel.</p>
  
  <div class="author-box">
    <p>Ditulis oleh: Budi</p> </div>
</section>

/* Kita ingin semua paragraf di blog berwarna gelap */
.blog-content p {
  color: #333;
}

/* Kita ingin HANYA paragraf pertama setelah H1 yang menonjol */
.blog-content h1 + p {
  font-size: 1.25rem;
  color: #2c3e50;
  line-height: 1.6;
}

/* Kita tidak ingin p di dalam author-box ikut berubah ukurannya */
.blog-content > p {
  margin-bottom: 20px;
}