CSS'te dört farklı temel seçici türünden bahsedilebilir: etiket, id (#), class (.) ve evrensel (*) seçiciler.

etiket

CSS kurallarını HTML ögeleri ile ilişkilendirmek için ilgili HTML ögesinin yada grubunun etiketi kullanılır. Özellikle belli HTML ögelerini sayfa içindeki konumlarına göre biçimlendirmek için idealdir. Aynı anda birden fazla seçici harmanlanarak karmaşık hedeflemeler oluşturulabilir. Bu CSS kuralı, web sayfasında bulunan tüm paragrafları biçimlendirir.

p {
    font-family: Arial, Helvetica;
    font-size: 14px;
    color: #ccc;
}

#id

Seçici olarak HTML ögesinin id özelliği kullanılır. (#) simgesi ile tanımlanır. Bir HTML sayfasında aynı id'ye sahip birden fazla öge bulunamayacağından id seçici, yalnızda tek bir HTML ögesini hedeflemek için tercih edilir.

#ilkParagraf {
    font-family: Arial, Helvetica;
    font-size: 14px;
    color: #ccc;
}

.class

Seçici olarak HTML ögesinin class özelliği kullanılır. (.) simgesi ile tanımlanır. Tek bir CSS kuralı ile birden fazla HTML ögesini hedeflemek için idealdir.

.vurgu {
    color: red;
    text-decoration: underline;
}

Eğer sadece belirli bir HTML ögesine bağlı bir CSS seçici oluşturmak isterseniz aşağıdaki söz dizimini kullanabilirsiniz. Bu CSS kuralı sadece vurgu isimli bir sınıfa sahip p etiketlerine uygulanacaktır.

p.koyu {
    font-weight: bold;
}

HTML ögelerini birden fazla CSS kuralı ile biçimlendirebilirsiniz. Bunun için ilgili HTML ögesinin class özelliğini şu şekilde yazmanız yeterli olacaktır.

<p class="vurgu koyu">CSS öğreniyorum!</p>

NOT: Id ve class belirlerken şu kurallara dikkat edilmelidir:

Bir rakam ile başlamamalıdır.
Boşluk, Türkçe ve özel karakter içeremez.

* Evrensel Seçici

Evrensel seçici (*), belirlenen kapsam dahilindeki tüm HTML ögelerini seçer. Örneğin bu CSS kuralı, web sayfasındaki tüm HTML ögelerini biçimlendirir.

* {
    font-family: Arial, Helvetica;
    font-size: 14px;
    color: #ccc;
}

Seçicileri Gruplamak

Web sayfalarını biçimlendirirken çoğu zaman farklı seçicileri gruplandırmak zorunda kalacaksınız. Gruplandırma, ortak CSS özelliklerine sahip HTML ogelerini biçimlendirirken daha az kod yazmanıza olanak sağlar.

Seçicileri gruplandırmak için (,) virgül kullanılır. Bu CSS kuralı, web sayfasında bulunan h1, h2 ve h3 HTML ögelerinin rengini kırmızı yapar.

h1, h2, h3 {
    color: #f00;
}

Hadi sıra sizde!

Seçiciler hakkında öğrendiğiniz bilgileri somutlaştırmak için lütfen aşağıdaki örnekleri detaylı olarak inceleyin ve kendi CSS seçicilerinizi yazmaya çalışın.