Daha önce, HTML kodlarımızı CSS (stil şablonları) ile renk, boyut, yazı stili, arka plan rengi vb. gibi değiştirebileceğimizi öğrenmiştik. Bunun yanı sıra nesnelerin tamamına ya da özel olarak sadece bir tanesine müdahale etmek istediğimizde ise seçicilerimizi kullanırız. Bu seçiciler “Class” ve “Id” seçicileridir. Class seçicisi CSS’de “.”, Id seçicisi ise CSS’de “#” olarak gösterilir. HTML’de ise parametre olarak kullanılır.
Class
Class seçicisini, bir HTML sayfasında, birden fazla nesneye aynı özelliği vermek için kullanırız. Class, birden fazla nesneye atanabilir. Ayrı ayrı her nesne için aynı kodları tekrar tekrar yazmaktansa tek bir kod yazımıyla belirlediğimiz nesneleri bir kerede özelleştirmemizi sağlar. Bir örnek ile açıklayacak olursak;
<html>
<head>
<style>
.yazi-stili {
font-size: 15px;
color: red;
background: skyblue;
padding: 50px;
text-align: center;
}
</style>
</head>
<body>
<p class="yazi-stili">Buraya bir metin gelecek</p>
<p class="yazi-stili">Buraya bir metin gelecek</p>
</html>
Yukarıdaki örnekte de belli olacağı üzere, class içerisinde “yazi-stili” olarak bir değer atadık. CSS’e ise bu özelliğin bir class seçicisiyle atandığını belli etmek için “.yazi-stili” olarak belirttik. Ardından yazı boyutu, renk, arka plan, iç boşluk ve hizalama özelliği verdik. Her iki paragraf etiketine ayrı ayrı aynı özellikler için CSS yazmak yerine sadece bir kere CSS yazmış olduk.
Id
Id’ler class’ların tam tersi sadece tek bir nesneye atanır ve birden fazla nesneye atanamazlar. Tarayıcılar mutlaka birden fazla nesneye tanımlanan id için hata verecek ya da id’yi tanımlamayacaktır. Class örneğinde 2 farklı paragraf etiketimize yazı boyutu, renk, arka plan, iç boşluk ve hizalama özelliği vermiştik. Eğer paragraf etiketlerinden birine class ile verdiğimiz özellik uygulansın ancak sadece arka plan rengi farklı olsun demek istersek, paragraf etiketlerinden bir tanesine bir de id uygulamamız gerekecek. Bunu bir de örnek ile gösterelim;
<html>
<head>
<style>
.yazi-stili {
font-size: 15px;
color: red;
background: skyblue;
padding: 50px;
text-align: center;
}
#arkaplan-rengi {
background: pink;
}
</style>
</head>
<body>
<p class="yazi-stili">Buraya bir metin gelecek</p>
<p class="yazi-stili" id="arkaplan-rengi">Buraya bir metin gelecek</p>
</html>
Örnekte de olduğu gibi, id içerisinde “arkaplan-rengi” olarak bir değer atadık. CSS’e ise bu özelliğin bir id seçicisiyle atandığını belli etmek için “#arkaplan-rengi” olarak belirttik. Class ile daha öncesinden yazı boyutu, renk, arka plan, iç boşluk ve hizalama özelliği vermiştik. Id ile sadece ikinci paragraf etiketinin özellikleri diğerine benzerken arka plan rengini pembe ile değiştirmiş olduk.
