CSS Class Seçicisi Ayrıntısı

Sınıf seçicisi, belge elemanlarından bağımsız bir şekilde tarz belirlemeyi sağlar.

CSS Class Seçicisi

Sınıf seçicisi, belge elemanlarından bağımsız bir şekilde tarz belirlemeyi sağlar.

Bu seçici tek başına kullanılabilir, aynı zamanda diğer elemanlarla birlikte de kullanılabilir.

İpucu:Bu seçicileri kullanabilmek için belgeyi uygun şekilde işaretlemek zorundasınız, bu yüzden bu iki seçiciyi kullanmak genellikle bazı tasarım ve planlama gerektirir.

Özel tasarımı göz önünde bulundurmadan tarz uygulamak için en yaygın yöntem sınıf seçicisini kullanmaktır.

HTML kodunu değiştirin

Sınıf seçici düzgün çalışabilmesi için öncelikle belirlenen belge işaretlerinin değiştirilmesi gereklidir.

Sınıf seçicisinin tarzını elemanla ilişkilendirmek için class'ı uygun bir değere atamak zorundasınız. Aşağıdaki HTML koduna bakın:

<h1 class="important">
Bu başlık çok önemlidir.
</h1>
<p class="important">
Bu paragraf çok önemlidir.
</p>

Yukarıdaki kodda, iki elemanın class'ı önemli olarak tanımlanmıştır: ilk başlık (h1 elemanı), ikinci paragraf (p elemanı).

Gramer

Daha sonra, bu sınıflandırılmış elemanlara stil uygulamak için aşağıdaki grameri kullanırız, yani sınıf adı önünde bir nokta işareti (.) ve joker seçici ile birlikte:

*.important {color:red;}

Sadece tüm sınıf adı aynı olan elemanları seçmek istiyorsanız, sınıf seçicisinde joker seçiciyi göz ardı edebilirsiniz, bu kötü bir etki yaratmaz:

.important {color:red;}

Kişisel Deneyim

Element Seçicileri ile Birlikte Kullanım

Sınıf seçicileri, element seçicileri ile birlikte kullanılabilir.

Örneğin, sadece paragrafların kırmızı metin olarak görüntülenmesini isteyebilirsiniz:

p.important {color:red;}

Şu anda seçici, class özelliğinde 'important' olan tüm p elemanlarını eşleştirir, ancak bu class özelliğine sahip olmayan diğer her türlü elemanla eşleşmez. Seçici p.important, 'class' özelliği 'important' olan tüm paragrafları ifade eder. Çünkü h1 elemanı bir paragraf değil, bu kuralların seçiciyle uyumlu değildir, bu yüzden h1 elemanı kırmızı metne dönüşmez.

Eğer gerçekten h1 elemanına farklı bir stil uygulamak istiyorsanız, h1.important seçicisini kullanabilirsiniz:

p.important {color:red;}
h1.important {color:blue;}

Kişisel Deneyim

CSS Çoklu Sınıf Seçicisi

Önceki bölümden, class değerinde bir kelime içeren durumu ele aldık. HTML'de, bir class değerinde kelime listeleri olabilir ve bu kelimeler boşluklarla ayrılır. Örneğin, belirli bir elemanı hem 'important' hem de 'warning' olarak işaretlemek istiyorsanız, yazabilirsiniz:

<p class="important warning">
Bu paragraf, çok önemli bir uyarıdır.
</p>

Bu iki kelimenin sırası önemlidir, 'warning important' olarak da yazılabilir.

class olarak 'important' olan tüm elemanların kalın, 'warning' olarak olan tüm elemanların yatay yazıya sahip olduğunu ve hem 'important' hem de 'warning' içeren tüm elemanların bir altın rengi arka plana sahip olduğunu varsayıyoruz. Bu durumda yazabiliriz:

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

Kişisel Deneyim

İki sınıf seçicisini bir araya getirerek yalnızcaBu sınıfları aynı anda içerenelemanları (sınıf adlarının sırası önem taşımaz).

Bir çoklu sınıf seçicisinde, sınıf adı listesinde bulunmayan bir sınıf adı varsa, eşleşme başarısız olacaktır. Aşağıdaki kurallara bakın:

.important.urgent {background:silver;}

Beklendiği gibi, bu seçici sadece class özelliğinde 'important' ve 'urgent' kelimelerini içeren p elemanlarını eşleştirecektir. Bu nedenle, sadece 'important' ve 'warning' kelimelerini içeren bir p elemanı eşleştirilemez. Ancak, aşağıdaki elementleri eşleştirebilir:

<p class="important urgent warning">
Bu paragraf, çok önemli ve acil bir uyarıdır.
</p>

Kişisel Deneyim

Önemli Not:IE7'den önceki sürümlerde, farklı platformlardaki Internet Explorer, çoklu sınıf seçicileri doğru bir şekilde işlemeyebilir.