Pemilihan Pemilih Klas

Dalam CSS, pemilih kelas ditampilkan dengan titik:

.center {text-align: center}

Dalam contoh di atas, semua elemen HTML yang memiliki kelas center adalah yang diatur di tengah.

Dalam kode HTML di bawah, elemen h1 dan p memiliki kelas center. Ini berarti keduanya akan mengikuti aturan pemilih ".center".

<h1 class="center">
Judul ini akan diatur di tengah.
</h1>
<p class="center">
Paragraf ini juga akan diatur di tengah.
</p>

Perhatian:Karakter pertama dari nama kelas tidak boleh menggunakan angka! Ia tidak akan berfungsi di Mozilla atau Firefox.

Seperti id, class juga dapat digunakan sebagai pemilih turun:

.fancy td {
	color: #f60;
	background: #666;
	}

Dalam contoh ini, seluruh sel tabel yang berada di dalam elemen yang lebih besar dengan nama kelas fancy akan menampilkan teks kuning dengan latar belakang abu-abu. (Elemen yang lebih besar dengan nama kelas fancy mungkin adalah tabel atau div)

Elemen juga dapat dipilih berdasarkan klas mereka:}

td.fancy {
	color: #f60;
	background: #666;
	}

Dalam contoh di atas, sel tabel dengan klas fancy akan memiliki latar belakang abu-abu dan warna kuning.

<td class="fancy">

Anda dapat menempatkan klas fancy bagi setiap elemen tabel sebanyak yang diinginkan. Seluruh sel yang ditandai dengan fancy akan memiliki latar belakang abu-abu dan warna kuning. Sel yang belum ditugaskan klas dengan nama fancy tidak akan dipengaruhi oleh aturan ini. Ada hal lain yang perlu dicatat, paragraf dengan klas fancy juga tidak akan memiliki latar belakang abu-abu dan warna kuning, serta elemen lain yang ditandai dengan fancy juga tidak akan dipengaruhi oleh aturan ini. Ini disebabkan oleh cara menulis aturan ini, efek ini dihadirkan hanya untuk sel tabel yang ditandai dengan fancy (yaitu memilih klas fancy dengan elemen td).

Kandungan Terkait

Jika Anda memerlukan pemahaman yang mendalam tentang pemilihan pemilih klas, silakan baca panduan tinggi CodeW3C.com:Pemilihan Pemilih Klas Detaill。