CSS Seçicileri: Tanım ve Kısa Bilgiler

CSS seçicileri, HTML belgesindeki elementleri hedefleyerek bu elementlere stil uygulamak için kullanılır. Seçiciler, web sayfasındaki belirli bir veya birden fazla elementi seçmek ve onlara belirli stil kurallarını atamak için CSS’in temel yapı taşlarından biridir. Her bir seçici türü, belirli bir HTML elemanını, sınıfı, ID’yi veya özelliği hedefleyebilir. Seçiciler sayesinde, sayfadaki tüm içerik yapılandırılabilir ve özelleştirilebilir.

Seçicilerin en yaygın kullanım alanları arasında metinleri renklendirme, arka planları değiştirme, kenarlık ekleme ve elementlerin yerleşim düzenini ayarlama yer alır. Örneğin, bir <h1> başlığını kırmızı yapmak ya da yalnızca belirli bir “class” içindeki elementleri stilize etmek seçicilerle mümkündür.

Özetle, CSS seçicileri sayesinde HTML elementlerini hedef alarak, web sayfalarının görünümünü ve düzenini yönetebilirsiniz.

Evrensel Seçici (*)
Tüm HTML elementlerini seçer ve stil uygular.

* {
  margin: 0;
  padding: 0;
}

Element Seçicisi
Belirli bir HTML etiketine stil uygular. Örneğin, tüm <p> etiketleri hedeflenir.

p {
  color: blue;
}

Sınıf Seçicisi (.sınıfAdı)
Aynı sınıfa sahip birden fazla elementi hedefler. HTML’de “class” özelliği ile belirtilir.

.kutu {
  background-color: yellow;
}

ID Seçicisi (#idAdı)
Belirli bir ID’ye sahip tek bir elementi seçer. HTML’de “id” ile belirtilir.

#baslik {
  font-size: 24px;
}

Atribut (Özellik) Seçicileri
Belirli bir özelliğe sahip elementleri hedefler.

input[type="text"] {
  border: 1px solid gray;
}

CSS seçicileri, stil uygulamak için son derece önemlidir. Doğru seçici kullanarak, HTML yapısındaki belirli elementlere özgü stiller verebilirsiniz.