Selektor Grup

Selektor Grup CSS memungkinkan Anda untuk menerapkan gaya kepada beberapa elemen dengan satu aturan CSS. Ini sangat berguna ketika Anda ingin menerapkan gaya yang sama ke beberapa elemen HTML sekaligus. Mari kita lihat contoh dan cara menggunakannya:

1. Penulisan Selektor Grup

Untuk membuat Selektor Grup, Anda cukup menyatukan beberapa selektor dengan tanda koma (,). Contoh:

h1, h2, h3 {
    color: blue;
    font-size: 24px;
}

Dalam contoh di atas, gaya teks biru dan ukuran font 24px akan diterapkan pada semua elemen <h1>, <h2>, dan <h3>.

2. Menentukan Properti CSS

Anda dapat menentukan beberapa properti CSS dalam satu aturan Selektor Grup. Ini sangat efisien karena menghindari pengulangan kode yang sama. Contoh:

p, ul, ol {
    margin: 10px;
    padding: 5px;
    border: 1px solid #ccc;
}

Dalam contoh di atas, semua elemen <p>, <ul>, dan <ol> akan memiliki margin, padding, dan border yang sama.

3. Contoh Penggunaan Selektor Grup

Misalkan Anda memiliki HTML seperti ini:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>Paragraf 1</p>
<p>Paragraf 2</p>
<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
</ul>

Dengan aturan CSS Selektor Grup seperti di atas, Anda akan melihat bahwa elemen-elemen yang sesuai akan memiliki gaya yang sama.

Ini adalah dasar-dasar Selektor Grup CSS. Anda dapat menggunakan mereka untuk membuat gaya yang konsisten dan menghemat waktu dalam pengembangan web.

PREVIOUS
NEXT