CSS Seçiciler

CSS Seçici Nedir ?

Stil tanımlamalarında hangi elemente işlem yapıyorsak o elementi belirtmek CSS'in ilk kuralıdır. Stili, boyutlandırma ya da konumlandırma gibi tanımlarımızın hangi nesneye uygulanacağını CSS'in öğrenebilmesi için tanımlamamıza öncelikle seçicinin ismini yazarak başlarız.

Etiket İsmi

Etiket ismi dediğimiz html yapıyı oluşturan tag isimleridir. Örneğin paragraf için <p>, görsel için <img>, listelemeler için <ul> gibi. Bu şekilde etiket ismi ile tanımladığımız css stilleri, sayfada bulunan ilgili tüm etiketleri etkiler. Bir örnek ile tüm paragraf metinlerinin renklerini kırmızı yapalım.

p{
    color:red;
}

Bu tanımlama ile paragraflarımızın rengi artık kırmızı renkte çıktı verecektir.

<p>Bu metin rengi kırmızı olacak</p>

Sınıf Seçicileri

Css tanımlamalarında daha çok tercih edilen sınıf seçicileri ilgili sınıfın tanımlı olduğu tüm etiketlere belirttiğimiz özellikleri uygular. Tüm paragrafların kırmızı olması çoğu kez istenebilecek birşey değildir. Kırmızı olmasını istediğimiz paragraflar için örnek olarak color-red isminde sınıf tanımlayarak, bu sınıfın tanımlı olduğu paragrafların kırmızı olmasını sağlayalım.

.color-red{
    color:red;
}

Bu örnek ile <p> etiketi ile oluşturduğumuz etiketlere color-red sınıfını atayarak kırmızı renge sahip olmasını sağlayabiliriz. Ancak yalnızca paragraflarda değil, bu sınıfı tanımladığımız her etikette color:red tanımının geçerli olmasını istiyorsak