CSS Sınıf Seçicisi

CSS'te, sınıf seçicileri bir nokta işareti ile gösterilir:

.center {text-align: center}

Yukarıdaki örnekte, center sınıfına sahip tüm HTML elemanları ortada yerleştirilmiştir.

Aşağıdaki HTML kodunda, h1 ve p elemanları center sınıfına sahiptir. Bu, her ikisinin de ".center" seçicisindeki kurallara uymasını anlamına gelir.

<h1 class="center">
Bu başlık da ortada hizalanacaktır
</h1>
<p class="center">
Bu paragraf da ortada hizalanacaktır.
</p>

Dikkat:Sınıf adının ilk karakteri rakam olamaz! Mozilla veya Firefox'ta etkili olmaz.

ID ile aynı şekilde, sınıf da türetilmiş seçici olarak kullanılabilir:

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

Bu örnekte, 'fancy' adlı sınıflı daha büyük elemanın içindeki tablo hücreleri gri arka planla ve turuncu metinle gösterilecektir. (Daha büyük 'fancy' adlı eleman bir tablo veya bir div olabilir)

Elemanlar aynı zamanda sınıflarına göre seçilebilir:

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

Yukarıdaki örnekte, 'fancy' adlı sınıfa sahip tablo hücresi gri arka planlı turuncu olacaktır.

<td class="fancy">

Sınıf 'fancy' herhangi bir tablo elementine sınırsız sayıda atanabilir. 'fancy' olarak işaretlenmiş hücreler gri arka planlı turuncu olacaktır. 'fancy' adlı adlandırılmamış sınıfın atanmamış hücreleri bu kurallara etkilenecektir. Ayrıca, 'fancy' sınıfına sahip paragraflar da gri arka planlı turuncu olmayacak, tabii ki, 'fancy' olarak işaretlenmiş herhangi bir diğer element de bu kurallara etkilenecektir. Bu, bu kuralların yazılma şekline bağlıdır, bu etki 'fancy' olarak işaretlenmiş tablo hücrelerine (td elementi ile 'fancy' sınıfını seçmek için kullanılır) sınırlıdır.

İlgili İçerikler

Sınıf seçicileri hakkında daha derinlemesine bilgi edinmek istiyorsanız, CodeW3C.com'un ileri düzey eğitim sayfalarını okuyun:CSS Sınıf Seçicisi Ayrıntısı。