Temel CSS Seçiciler (Selectors)

Bu yazıda, CSS ile Evrensel seçici kullanımı, Etiket (element) seçiciler, Class seçiciler ve kullanım amacı, ID seçiciler ve farkları, Birden fazla seçici ile stil verme konuları anlatılmaktadır.

CSS seçiciler, hangi HTML elemanlarına stil uygulanacağını belirlemek için kullanılır. Doğru seçici kullanımı, CSS kodlarının daha düzenli, okunabilir ve etkili olmasını sağlar. Bu bölümde CSS’in en temel ve en sık kullanılan seçicilerini örneklerle inceleyeceğiz.

Evrensel Seçici (Universal Selector)

Evrensel seçici, sayfadaki tüm HTML elemanlarını seçmek için kullanılır. Yıldız (*) karakteri ile ifade edilir. 

* {
  margin: 0;
  padding: 0;
}  

Bu kullanım genellikle tarayıcıların varsayılan boşluklarını sıfırlamak için tercih edilir. (Basit sıfırlama)

Etiket Seçici (Element / Type Selector)

Belirli bir HTML etiketine sahip tüm elemanları seçmek için kullanılır. En temel CSS seçici türlerinden biridir.

p {
  color: gray;
}  

Bu kural, sayfadaki tüm <p> etiketlerinin yazı rengini gri yapar.

Class Seçici

Class seçici, aynı class adına sahip bir veya birden fazla HTML elemanını seçmek için kullanılır. Nokta (.) ile başlar.

<p class="bilgi">CSS öğreniyorum</p>
<div class="bilgi">Frontend dersleri</div>      

.bilgi {
    color: blue;
    font-weight: bold;
}

Class seçiciler, tekrar eden tasarımlar için en çok tercih edilen yöntemdir.

ID Seçici

ID seçici, sayfa içerisinde benzersiz olan bir elemanı seçmek için kullanılır. Diyez (#) işareti ile başlar.

<div id="header">Site Başlığı</div>
      

#header {
    background-color: #f2f2f2;
    padding: 20px;
}  

Aynı ID değeri bir sayfada yalnızca bir kez kullanılmalıdır.

Birden Fazla Seçici Kullanımı

Aynı CSS kuralını birden fazla elemana uygulamak için seçiciler virgül ile ayrılarak kullanılabilir.

h1, h2, h3 {
  font-family: Arial, sans-serif;
}  

Bu kural, tüm h1, h2 ve h3 etiketlerine aynı yazı tipini uygular.

Class ve Etiket Birlikte Kullanımı

Belirli bir etikete sahip ve belirli bir class’ı olan elemanları seçmek için birlikte kullanım mümkündür.

p.uyari {
  color: red;
}  

Bu kural yalnızca class="uyari" olan <p> etiketlerini etkiler.