CSS Seçiciler : Class (sınıf) Seçiciler
Css seçiciler html elemanlarına css özelliği kazandırmaktır. Örneğin;
.kirmizi {
background-color: red;
}
Yukarıda class’ı kirmizi olan tüm html elemanlarının arka plan rengini kırmızı yaptık.
p.anasayfa {
background-color: blue;
}
Yukarıda da class’ı anasayfa olan tüm paragraf ( <p> … </p> ) etiketlerinin arka plan renklerini mavi yaptık
Evet biliyoum çok kısa ve anlamsız oldu ama açıklayınca daha iyi anlayacaksınız. Css seçiciler css’in en önemli konusudur. Css ile ortaya çıkan, css2 ile geliştirilen ve css3 ile şimdiki ve daha kapsamlı halini alan seçiciler, bizleri javascriptin bazı yüklerinden de kurtarıyor. Öncelikle css seçiciler 3 başlıkta toplanır. Class seçiciler, ID seçiciler ve Özellik seçiciler.
Class ( sınıf ) seçiciler
Css değerlerini html elemanlarına tanımlamak için seçiciler kullanırız. Ya da aynı HTML elemanlarına değişik değerler vermek için kullanırız. Bu seçicilerden class seçiciler nokta ( . ) ile belirtilir. Örnek vererek daha iyi anlatabilirim
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.anasayfa {background-color:red}
</style>
</head>
<body>
<div class="anasayfa"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo alias quidem fugit voluptatum voluptatibus natus, accusamus incidunt commodi distinctio impedit qui quis aut! At reiciendis sint, est voluptatibus qui quis!</p></div>
</body>
</html>
Yukarıda head tagları arasındaki style tagı içerisinde. anasayfa class’ını görüyorsunuz. Bu class body tagları arasında class değeri anasayfa olan div elemanının arka plan rengini kırmızı yapar.
Yukarıdaki örnekte anasayfa class’ına sahip tüm elemanlar bu arka plan değerini alacaktır. Fakat bunu kısıtlayadabiliriz. Örneğin;
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p.anasayfa {background-color:red}
</style>
</head>
<body>
<p class="anasayfa">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo alias quidem fugit voluptatum voluptatibus natus, accusamus incidunt commodi distinctio impedit qui quis aut! At reiciendis sint, est voluptatibus qui quis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo alias quidem fugit voluptatum voluptatibus natus, accusamus incidunt commodi distinctio impedit qui quis aut! At reiciendis sint, est voluptatibus qui quis!</p>
</body>
</html>
Yukarıdaki örnekte paragraf ( <p> ) etiketine anasayfa class özelliği verilmiştir ve body içerisinde tanımladığınız style da da göreceğiniz üzere p.anasayfa şeklinde bir css tanımlaması yapmışız. Bu tanımlama da kısaca diyor ki class özelliği anasayfa olan tüm paragraf ( <p> ) elemanlarının arka plan değerini kırmızı yap. Yani class değeri farklı olan ya da olmayan paragraf elemanlarına işlem yapma demek isteniliyor.
Class seçicilerde bir seçici türü daha var. O da;
Çoklu sınıflar
Bu seçici türünde ise bir html elemanına birden fazla class tanımlaması yapabilirsiniz. Hemen örnekle açıklayayım.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p.anasayfa {background-color:red}
.yazi-15 {font-size: 15px}
.renk-beyaz {color:white;}
</style>
</head>
<body>
<p class="anasayfa yazi-15 renk-beyaz">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo alias quidem fugit voluptatum voluptatibus natus, accusamus incidunt commodi distinctio impedit qui quis aut! At reiciendis sint, est voluptatibus qui quis!</p>
</body>
</html>
Yukarıdaki örnekte gördüğünüz gibi style içerisinde 3 farklı class tanımlaması yaptım bunlar: anasayfa, yazi-15 ve renk-beyaz
Bu ayrı ayrı 3 css tanımlamasını da html elemanı olan paragrafa class özellik olarak verdim. Bu dosyayı browserda gördüğünüz zaman paragraf elemanının arka plan renginim kıırmızı, yazı büyüklüğünün 15px ve yazı renginin beyaz olduğunu göreceksiniz.
