Selektor class

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

Selector class digunakan untuk memilih elemen HTML berdasarkan nilai atribut class-nya. Selector ini memungkinkan kamu menerapkan gaya yang sama pada beberapa elemen di seluruh dokumenmu. Selector class sangat berguna saat kamu ingin menerapkan gaya yang sama pada sekelompok elemen, terlepas dari nama tag-nya.

Untuk memilih elemen dengan class tertentu di CSS, gunakan titik (.) diikuti nama class. Berikut sintaks dasar untuk menggunakan selector class:

.classname {
    property: value;
}

Contohnya:

.highlight {
    background-color: yellow;
    color: black;
}

Dalam contoh ini, selector class .highlight menargetkan semua elemen dengan class "highlight". Deklarasi mengatur warna latar menjadi kuning dan warna teks menjadi hitam untuk elemen-elemen ini.

Tantangan

Mudah

Kamu diberi dokumen HTML dengan berbagai elemen, termasuk heading (<h1>, <h2>), paragraf (<p>), dan elemen div (<div>). Belum ada yang memiliki class: pertama, tambahkan atribut class, lalu atur gaya elemen dengan selector class. Ikuti langkah-langkah berikut:

Tambahkan atribut class dengan nilai "blue-text" ke elemen <h1> dan elemen <p> pertama.
Tambahkan atribut class dengan nilai "large-text" ke elemen <h2> dan elemen <p> kedua.
Tulis aturan CSS menggunakan selector class yang menargetkan semua elemen dengan class "blue-text". Atur warna teks elemen-elemen ini menjadi biru.
Tulis aturan CSS menggunakan selector class yang menargetkan semua elemen dengan class "large-text". Atur ukuran font elemen-elemen ini menjadi 24 piksel.

Coba sendiri

<html>
<head>
    <title>Class Selector</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>
    <p>This is another paragraph.</p>
    <div>This is a division.</div>
</body>
</html>