Belajar CSS Bagian 7 : CSS Grouping: Cara Menggabungkan Beberapa Selector dalam Satu Style

Saat menulis CSS, sering kali kita ingin beberapa elemen memiliki gaya yang sama.
Kalau ditulis satu per satu, kodenya jadi panjang dan tidak efisien.

Di sinilah CSS Grouping digunakan.

---

Apa Itu CSS Grouping?

CSS Grouping (Grouped Selector) adalah teknik CSS untuk:

Menggabungkan beberapa selector agar menggunakan aturan CSS yang sama

CSS grouping HANYA menggunakan satu simbol, yaitu:

👉 koma ( , )

---

Bentuk Dasar CSS Grouping

selector1, selector2, selector3 {
  property: value;
}

Contoh

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

Artinya

• h1

• h2

• h3

semuanya menggunakan font yang sama.

---

Kenapa CSS Grouping Penting?

Tanpa grouping:

h1 {
  color: blue;
}
h2 {
  color: blue;
}
p {
  color: blue;
}

Dengan grouping:

h1, h2, p {
  color: blue;
}

📌 Manfaat utama CSS Grouping:

• Kode lebih singkat

• Lebih mudah dibaca

• Lebih mudah dirawat

• Menghindari duplikasi kode

---

CSS Grouping vs CSS Combinator

Banyak pemula sering tertukar antara grouping dan combinator.
Padahal fungsinya sangat berbeda.

CSS Grouping

h1, p {
  color: red;
}

➡️ Mengelompokkan selector
➡️ TIDAK melihat hubungan elemen

---

CSS Combinator

div p {
  color: red;
}

➡️ Berdasarkan hubungan struktur
➡️ p harus berada di dalam div

---

Perbandingan Singkat

Aspek	CSS Grouping	CSS Combinator
Simbol	,	spasi, >, +, ~
Fungsi	Pengelompokan	Hubungan elemen
Lihat struktur HTML	❌	✅
Termasuk combinator?	❌	❌

---

Satu-Satunya Simbol Grouping: Koma

❗ PENTING

Dalam CSS:

• ❌ Tidak ada grouping pakai spasi

• ❌ Tidak ada grouping pakai |

• ❌ Tidak ada grouping pakai &&

✔️ CSS grouping hanya dan hanya menggunakan koma ( , )

---

Contoh CSS Grouping dengan Class

.btn, .btn-primary, .btn-secondary {
  padding: 10px 16px;
  border-radius: 6px;
}

📌 Semua class button mendapatkan padding & radius yang sama.

---

CSS Grouping + Combinator (Kombinasi Umum)

CSS grouping boleh dan sering digabung dengan combinator.

Contoh

nav a, footer a {
  color: blue;
}

Artinya:

• Semua <a> di dalam <nav>

• Semua <a> di dalam <footer>

📌 Di sini:

• nav a → combinator

• footer a → combinator

• , → grouping

---

Contoh Real Case: Styling Button

button, input[type="submit"] {
  background-color: #2563eb;
  color: white;
  border: none;
}

📌 Digunakan agar:

• button

• input submit

memiliki tampilan seragam.

---

Best Practice CSS Grouping

✔ Gunakan grouping jika:

• Style benar-benar sama

• Tidak butuh perlakuan khusus

❌ Hindari grouping jika:

• Banyak override setelahnya

• Elemen beda konteks besar

---

Kesalahan Umum Pemula

❌ Mengira spasi adalah grouping

div p { ... } 

❌ Mengira combinator bisa menggantikan grouping

✔️ Ingat:

• Grouping = koma

• Combinator = hubungan struktur

---

Ringkasan CSS Grouping

• CSS Grouping dipakai untuk mengelompokkan selector

• Simbol grouping hanya koma ( , )

• Tidak berkaitan dengan parent, child, atau sibling

• Bisa digabung dengan combinator

• Membuat CSS lebih bersih & efisien