CSS Seçiciler (Selectors)

CSS, web sayfalarındaki öğelere stil vermek için kullanılan güçlü bir araçtır. CSS seçiciler (selectors), bu öğeleri hedeflemek ve onlara stil uygulamak için kullanılır. Her seçici türü, belirli bir HTML öğesini veya öğeler grubunu seçer ve üzerine stil uygular. Aşağıda CSS seçicilerinin daha detaylı açıklamaları ve örnekleri yer almaktadır.

1. Universal Seçici (*)

Açıklama:
* seçicisi, sayfadaki tüm öğeleri seçmek için kullanılır. Bu, bir öğeye stil uygulamak yerine tüm öğelere aynı stili vermek için idealdir. Ancak, çok geniş bir seçim olduğundan, genellikle sayfanın tüm öğelerini seçmek için dikkatli kullanılmalıdır. Performans üzerinde olumsuz bir etkisi olabilir, çünkü tüm öğelere uygulanır.

Örnek:

* {
  margin: 0;
  padding: 0;
}

Yukarıdaki örnek, sayfadaki tüm öğelerin dış boşluklarını (margin) ve iç boşluklarını (padding) sıfırlayacaktır. Bu, sayfanın temiz bir şekilde başlayabilmesi için yaygın bir tekniktir.

2. Öğeye Göre Seçici (element)

Açıklama:
Bu seçici, belirli bir HTML öğesini seçmek için kullanılır. Örneğin, h1, p, div gibi öğelerle stil uygulamak için kullanılır. Bu seçici türü, sayfadaki tüm belirli türdeki öğelere stil uygulamak için oldukça kullanışlıdır.

Örnek:

p {
  color: blue;
}

Bu örnekte, tüm <p> (paragraf) öğelerinin metin rengi mavi yapılır.

3. ID Seçici (#id)

Açıklama:
#id seçici, belirli bir öğenin id özelliğini kullanarak bu öğeyi seçer. HTML öğeleri benzersiz bir id değerine sahip olmalıdır, bu yüzden ID seçicisi her zaman yalnızca tek bir öğe üzerinde etkili olur. Web sayfasındaki her id değeri benzersiz olmalıdır.

Örnek:

#header {
  background-color: #333;
  color: white;
}

Burada, id="header" olan öğenin arka plan rengi koyu gri ve metin rengi beyaz yapılır.

4. Class Seçici (.class)

Açıklama:
.class seçici, belirli bir class özelliğine sahip öğeleri seçer. class özelliği, birden fazla öğe üzerinde aynı stili uygulamak için kullanılabilir. Bu seçici, birden fazla öğe ile stil uygulamak için çok yaygın bir kullanıma sahiptir.

Örnek:

.menu {
  font-family: Arial, sans-serif;
}

Bu örnekte, class="menu" olan tüm öğelere Arial yazı tipi uygulanır.

5. Çoklu Seçici (element, element)

Açıklama:
Birden fazla öğeyi aynı anda seçmek için virgül ile ayrılmış öğe adları kullanılabilir. Bu seçici türü, birden fazla öğeye aynı stil uygulamak için oldukça kullanışlıdır.

Örnek:

h1, h2, h3 {
  margin-bottom: 10px;
}

Bu stil, tüm <h1>, <h2>, ve <h3> öğelerinin altındaki boşluğu (margin-bottom) 10px yapar.

6. İç İçe Seçici (element element)

Açıklama:
Bu seçici, bir öğenin içinde yer alan başka bir öğeyi seçer. Yani, bir öğe içinde belirli bir türdeki başka bir öğeyi hedefler. Bu seçici türü, öğe hiyerarşisini hedef almak için oldukça kullanışlıdır.

Örnek:

div p {
  color: green;
}

Burada, <div> öğesi içinde yer alan tüm <p> öğelerinin metin rengi yeşil yapılır. div öğesi içinde yer alan diğer öğeler etkilenmez.

7. Çocuk Seçici (element > element)

Açıklama:
Bu seçici, bir öğenin doğrudan çocuklarını seçer. Yani, belirli bir öğenin yalnızca doğrudan alt öğelerini hedefler, alt öğe değilse etkilenmez.

Örnek:

ul > li {
  list-style-type: square;
}

Burada, yalnızca <ul> öğesinin doğrudan çocukları olan <li> öğeleri kare işaretçi ile gösterilir.

8. Yanında Seçici (element + element)

Açıklama:
Bu seçici, bir öğeyi, hemen önceki öğeyi takip eden öğeleri seçer. Yani, bir öğe tarafından takip edilen ilk öğeyi seçer.

Örnek:

h1 + p {
  font-weight: bold;
}

Bu stil, ilk <h1> öğesinin hemen ardından gelen ilk <p> öğesinin metnini kalın yapar.

9. Kardeş Seçici (element ~ element)

Açıklama:
Bu seçici, belirli bir öğeyi, aynı seviyedeki diğer öğeleri hedef alarak seçer. Yani, belirtilen öğeyi takip eden tüm öğelere stil uygulamak için kullanılır.

Örnek:

h1 ~ p {
  color: red;
}

Burada, bir <h1> öğesinin ardından gelen tüm <p> öğelerinin metin rengi kırmızı yapılır.

10. Öznitelik Seçici ([attribute])

Açıklama:
Bu seçici, belirli bir özniteliğe sahip öğeleri seçer. href, type, class gibi özniteliklere göre seçim yapabilirsiniz. Bu, özellikle form elemanlarını seçerken çok kullanışlıdır.

Örnek:

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

Burada, type="text" özelliğine sahip tüm öğeler seçilir ve kenarlık eklenir.

11. Durum Seçiciler (:hover, :focus, :active)

Açıklama:
Durum seçicileri, kullanıcı etkileşimde bulunduğunda (fareyle üzerine gelme, tıklama, odaklanma) etkinleşir. Bu, dinamik web sayfaları oluşturmak için oldukça faydalıdır.

Örnek:

a:hover {
  color: orange;
}

Bu stil, kullanıcı fareyi bir bağlantı üzerine getirdiğinde bağlantının rengini turuncu yapar.

12. Çocuk ve Son Çocuk Seçiciler (:first-child, :last-child)

Açıklama:
:first-child ve :last-child seçicileri, bir öğenin ebeveyninin ilk veya son çocuğunu seçer. Bu seçiciler, sayfa düzenini daha hassas bir şekilde kontrol etmenizi sağlar.

Örnek:

ul li:first-child {
  font-weight: bold;
}

ul li:last-child {
  margin-bottom: 0;
}