Seçiciler

Giriş kısmında belirtildiği gibi bir CSS kuralında ilk belirtilen kısım biçimlendirmenin hangi eleman ya da elemanlar için geçerli olacağını belirten seçici kısmıdır. Öncelikle en sık kullanılan seçicilere göz atmak faydalı olacaktır.


Eleman Türü

Bir eleman türü yazılarak o türdeki tüm elemanların biçimlendirilmesi sağlanabilir. Örneğin p yazılarak tüm paragrafların, h1 yazılarak tüm h1 etiketi ile oluşturulan başlıkların biçimlendirilmesi sağlanabilir.

<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
p{
color:red;
}
h1{
color:blue;
}
</style>
</head>
<body>
    <h1>Örnek Başlık</h1>
    <p>Örnek Paragraf</p>
</body>
</html>

Eleman İsmi

#eleman_ismi şeklinde kullanılan seçicilerle eleman ismi kullanılarak seçim yapılabilir. Bu seçiciyi kullanabilmek için öncelikle seçilecek eleman id niteliği ile isimlendirilmiş olmalıdır. Seçicide # işaretinden sonra bu isim yazıldığında o eleman seçilmiş olur.

<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
#ornek{
color:red;
}
</style>
</head>
<body>
    <p id="ornek">Biçimlendirilmiş Paragraf</p>
    <p>Biçimlendirilmemiş Paragraf</p>
</body>
</html>

Yukarıdaki örnekte sadece ismi verilen paragraf biçimlendirilecektir.


Eleman Sınıfı

.sinif_ismi şeklinde kullanılan seçicilerle eleman sınıfı kullanılarak seçim yapılabilir. Bu seçiciyi kullanılabilmek için öncelikle seçilecek elemanlar class niteliği ile bir sınıfa dahil edilmiş olmalıdır. Seçicide . sembolünden sonra bu sınıf ismi yazıldığında o sınıftaki elemanlar seçilmiş olur.

<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
.ornek{
color:red;
}
</style>
</head>
<body>
    <h1 class="ornek">Biçimlendirilmiş Başlık</h1>
    <p class="ornek">Biçimlendirilmiş Paragraf</p>
    <h1>Biçimlendirilmemiş Başlık</h1>
    <p>Biçimlendirilmemiş Paragraf</p>
</body>
</html>

Yukarıdaki örnekte sadece "ornek" sınıfına dahil olan elemanlar biçimlendirilecektir.

eleman_türü.eleman_sınıfı kalıbı kullanılarak belli bir eleman türündeki aynı sınıfa dahil elemanlar seçilebilir.

<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
h1.ornek{
color:red;
}
</style>
</head>
<body>
    <h1 class="ornek">Biçimlendirilmiş Başlık</h1>
    <p class="ornek">Biçimlendirilmiş Paragraf</p>
    <h1>Biçimlendirilmemiş Başlık</h1>
    <p>Biçimlendirilmemiş Paragraf</p>
</body>
</html>

Yukarıdaki örnekte sadece h1 eleman türündeki "ornek" sınıfına dahil elemanlar biçimlendirilecektir. İlk paragraf "ornek" sınıfına dahil olmasına rağmen h1 türünde olmadığı için biçimlendirilmeyecektir.


Gruplama

Seçicilerin arasına virgül konarak seçiciler gruplanabilir. Bunun yapılması durumunda tırnaklı parantezlerin arasındaki biçimlendirme gruplandırılmış olan tüm seçiciler için geçerli olacaktır.

<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
h1.ornek{
color:red;
}
p{
color:red;
}
</style>
</head>
<body>
    <h1 class="ornek">Biçimlendirilmiş Başlık</h1>
    <p class="ornek">Biçimlendirilmiş Paragraf</p>
    <h1>Biçimlendirilmemiş Başlık</h1>
    <p>Biçimlendirilmemiş Paragraf</p>
</body>
</html>

Yukarıdaki örnekte iki ayrı CSS kuralı ile biçimlendirme yapılmıştır. İlk kural "ornek" sınıfına ait h1 elemanlarını, ikinci kural dokümandaki tüm paragrafları biçimlendirmektedir. Görüldüğü gibi iki kural da yazı rengini kırmızı yapmayı sağlamaktadır. Bu iki kural seçicileri gruplanarak tek bir kurala indirgenebilir:

<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
h1.ornek, p{
color:red;
}
</style>
</head>
<body>
    <h1 class="ornek">Biçimlendirilmiş Başlık</h1>
    <p class="ornek">Biçimlendirilmiş Paragraf</p>
    <h1>Biçimlendirilmemiş Başlık</h1>
    <p>Biçimlendirilmemiş Paragraf</p>
</body>
</html>

Bu seçiciler en çok kullanılanlardır. Diğer seçiciler ayrı başlıklar altında anlatılacaktır.