Atribut class

Atribut class menentukan satu atau beberapa kelas untuk elemen (yang dimaksud dengan elemen adalah tag).

Ini dilakukan agar kemudian dapat mengakses sekelompok elemen yang memiliki kelas yang sama melalui CSS, dan menerapkan properti tertentu untuknya (misalnya, mengganti warna teks, ukuran font dan sebagainya).

Ada juga atribut id, yang mirip dengan atribut class dan memungkinkan untuk memilih elemen pada halaman HTML.

Perbedaan antara atribut class dan atribut id adalah class memilih sekelompok elemen (bahkan jika diberikan kepada satu elemen - nantinya dapat diberikan juga kepada elemen lain), sedangkan id memilih elemen yang unik (seharusnya tidak ada elemen lain dengan id yang sama di halaman website, jika tidak akan terjadi konflik).

Bagaimana memahami, apa yang harus diberikan kepada elemen - kelas atau id? Kelas diberikan kepada elemen-elemen yang berulang pada halaman-halaman website (agar tidak menulis kode CSS yang sama beberapa kali). Bahkan jika saat ini elemen tersebut hanya satu, tetapi Anda merasa elemen serupa mungkin muncul di kemudian hari - berikan kelas kepada elemen ini. Jika Anda yakin, bahwa elemen tersebut unik - maka berikan id. Meskipun saat ini ada kecenderungan untuk memberikan kelas kepada semua elemen, dan id disisakan untuk JavaScript, tapi hal ini tidak diterima secara universal.

Beberapa kelas dapat diberikan kepada sebuah elemen, dalam hal ini kelas-kelas tersebut harus dicantumkan dipisahkan oleh spasi.

Nama kelas harus diketik menggunakan huruf Inggris, angka, tanpa spasi (spasi memisahkan kelas satu sama lain, sebagai gantinya dapat digunakan garis bawah atau tanda hubung). Kelas tidak boleh dimulai dengan angka (di HTML5 sudah bisa, tetapi tidak akan bekerja di browser lama).

Nama untuk kelas sebaiknya diberikan dalam bahasa Inggris (bukan bahasa Rusia, hanya dengan huruf Inggris!). Nama harus bermakna, mencerminkan inti dari kelas tersebut.

Contoh

Mari berikan warna teks merah untuk semua paragraf dengan kelas test:

<p class="test">Paragraf dengan kelas test.</p>
<p>Paragraf kontrol tanpa kelas.</p>

.test {
	color: red;
}

Contoh . Beberapa kelas untuk elemen

Dan di sini mari berikan beberapa kelas kepada paragraf pertama - test1 dan test2 (tuliskan mereka dipisahkan oleh spasi). Kelas test1 memberikan warna teks merah, dan kelas test2 memberikan ukuran font sebesar 20px. Kepada paragraf kedua hanya diberikan kelas test1 (paragraf ini akan menjadi merah), dan kepada paragraf ketiga - kelas test2 (paragraf ini akan memiliki ukuran font 20px). Paragraf pertama, yang memiliki dua kelas, akan memiliki warna merah dan ukuran font 20px secara bersamaan:

<p class="test1 test2">Paragraf dengan dua kelas test1 dan test2.</p>
<p class="test1">Paragraf dengan kelas test1.</p>
<p class="test2">Paragraf dengan kelas test2.</p>
<p>Paragraf kontrol tanpa kelas.</p>

.test1 {
	color: red;
}
.test2 {
	font-size: 20px;
}

Lihat juga

atribut id,
yang menentukan pengidentifikasi unik untuk elemen