Hari 7: CSS Grouping Selector – Belajar CSS From Zero to Hero

by

Belajar CSS grouping selector untuk menulis kode lebih singkat dan efisien. Lengkap dengan contoh, studi kasus, dan latihan praktis agar styling lebih rapi.

Hari 7: CSS Grouping Selector – Belajar CSS From Zero to Hero

Apa Itu CSS Grouping Selector?

Dalam CSS, sering kali kita ingin memberi gaya yang sama pada beberapa elemen HTML. Jika menulis aturan CSS satu per satu, kode akan menjadi panjang dan sulit dirawat.

Solusinya adalah menggunakan grouping selector. Dengan grouping selector, kita bisa menggabungkan beberapa selector dalam satu aturan CSS, dipisahkan dengan tanda koma ,.

Cara Menulis CSS Grouping Selector

Sintaks grouping selector sangat sederhana:

selector1, selector2, selector3 {
  property: value;
}

Artinya, semua selector yang digabung akan mendapat style yang sama.

Contoh:

h1, h2, h3 {
  color: navy;
  font-family: Arial, sans-serif;
}

Hasil: semua heading <h1>, <h2>, dan <h3> tampil dengan warna biru navy dan font Arial.

Kapan Menggunakan Grouping Selector?

  1. Untuk menghemat kode – tidak perlu menulis berulang.
  2. Untuk konsistensi – gaya seragam di beberapa elemen sekaligus.
  3. Untuk readability – kode lebih singkat dan mudah dibaca.

Studi Kasus: Styling Artikel Blog

HTML:

<article>
  <h1>Judul Artikel</h1>
  <h2>Subjudul Artikel</h2>
  <h3>Sub-subjudul</h3>
  <p>Isi paragraf artikel.</p>
  <footer>Footer artikel</footer>
</article>

CSS tanpa grouping:

h1 {
  color: #0066cc;
}

h2 {
  color: #0066cc;
}

h3 {
  color: #0066cc;
}

CSS dengan grouping:

h1, h2, h3 {
  color: #0066cc;
}

Hasil: lebih ringkas, lebih mudah dirawat.

Grouping dengan Class dan ID

Grouping selector juga bisa digunakan dengan class dan ID.

Contoh:

.header, .footer, #menu {
  background: #f2f2f2;
  padding: 15px;
}

HTML:

<div class="header">Header</div>
<div id="menu">Menu Navigasi</div>
<div class="footer">Footer</div>

Hasil: ketiga elemen mendapat background abu-abu terang dan padding 15px.

Kesalahan Umum Pemula

  1. Lupa menambahkan koma antar selector
    Salah:
h1 h2 h3 {
  color: red;
}

(Ini justru artinya descendant, bukan grouping).

Benar:

h1, h2, h3 {
  color: red;
}

2. Menggabungkan selector yang tidak relevan
Misalnya p, #header bisa membingungkan jika keduanya tidak sejenis. Lebih baik dipisah agar jelas.

Tips Menggunakan Grouping Selector

  • Gabungkan hanya selector yang benar-benar butuh gaya sama.
  • Jangan terlalu banyak grouping dalam satu aturan, agar kode tetap jelas.
  • Gunakan grouping untuk menjaga konsistensi layout (misalnya heading, button, card).

Latihan Praktis Hari 7

  1. Buat halaman HTML dengan:
    • Beberapa heading (h1, h2, h3).
    • Beberapa paragraf.
    • Satu header, footer, dan navigasi.
  2. Gunakan grouping selector untuk:
    • Memberi warna sama pada semua heading.
    • Memberi background sama pada header, footer, dan navigasi.

Referensi Belajar

Rencana Belajar Selanjutnya

Hari ini kamu belajar CSS Grouping Selector untuk menulis kode lebih singkat. Besok, kita akan lanjut ke Hari 8: CSS Colors untuk mengatur warna teks, background, dan border.
👉 Lanjut ke Hari 8: CSS Colors

Kesimpulan

  • Grouping selector menggabungkan beberapa selector dalam satu aturan CSS.
  • Gunakan koma , untuk memisahkan selector.
  • Cocok untuk konsistensi gaya dan efisiensi kode.

✨ Tantangan Hari 7:
Refactor halaman HTML-mu dengan grouping selector. Bandingkan hasil kode sebelum dan sesudah. Upload ke GitHub atau bagikan screenshot di media sosial dengan hashtag #BelajarCSS.

Leave a Comment