Selektor Grup

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 14 dari 76.

Selector grup digunakan untuk memilih beberapa elemen HTML dan menerapkan gaya yang sama pada semuanya. Ini sangat berguna saat kamu ingin menerapkan kumpulan gaya yang sama ke elemen yang berbeda tanpa harus menulis aturan terpisah untuk setiap elemen. Dengan mengelompokkan selector, kamu dapat menulis kode CSS yang lebih ringkas dan efisien.

Untuk menggunakan selector grup, kamu mencantumkan selector yang ingin dikelompokkan, dipisahkan dengan koma (,). Berikut sintaks dasarnya:

selector1, selector2, selector3 {
    property: value;
}

Misalnya, kamu ingin menerapkan warna teks dan ukuran font yang sama ke semua elemen <h1>, <h2>, dan <p>. Kamu bisa menggunakan selector grup seperti ini:

h1, h2, p {
    color: blue;
    font-size: 16px;
}

Dalam contoh ini, pemilih grup menargetkan semua elemen <h1>, <h2>, dan <p>. Deklarasi tersebut mengatur warna teks menjadi biru dan ukuran font menjadi 16 piksel untuk semua elemen ini.

Kamu bisa mengelompokkan jenis selector apa pun, termasuk selector tipe, selector class, dan selector ID:

h1, .highlight, #intro {
    background-color: yellow;
}

Tantangan

Mudah

Kamu diberi dokumen HTML dengan berbagai elemen, termasuk heading (<h1>, <h2>), paragraf (<p>), dan elemen div (<div>). Tugasmu adalah menggunakan selector grup untuk memberi style pada elemen-elemen ini. Ikuti langkah-langkah berikut:

Tulis aturan CSS menggunakan selector grup yang menargetkan semua elemen <h1> dan <h2>. Atur warna teks elemen-elemen ini menjadi red.
Tulis aturan CSS menggunakan selector grup yang menargetkan semua elemen <p> dan elemen <div>. Atur warna latar belakang elemen-elemen ini menjadi lightgray dan ukuran font menjadi 18 piksel.

Coba sendiri

<html>
<head>
    <title>Group Selectors</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <h2>This is a subheading</h2>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>