CSS Selectors (CSS Seçiciler), HTML dokümanındaki belirli öğeleri hedefleyerek onlara stil uygulamamızı sağlayan yapılardır. Doğru seçici kullanımı; daha temiz, performanslı ve sürdürülebilir kod yazmanın temelidir.

Bu rehberde, temel seçicilerden gelişmiş kombinasyonlara kadar tüm önemli CSS seçici türlerini detaylı ve profesyonel bir şekilde ele alacağız.

1️⃣ Basic Selectors (Temel Seçiciler)

Temel seçiciler, CSS’in en sık kullanılan ve en önemli yapı taşlarıdır.

1.1 Type (Element) Selector – Etiket Seçici

Belirli bir HTML etiketine sahip tüm öğeleri seçer.

p {
  color: blue;
}

Yukarıdaki kod, sayfadaki tüm <p> etiketlerinin metin rengini mavi yapar.

📌 Kullanım Alanı:

• Genel stil tanımlamaları
• Tüm başlıkları veya paragrafları aynı biçimde düzenleme

1.2 Class Selector – Sınıf Seçici

Belirli bir class adına sahip tüm öğeleri seçer. En çok kullanılan seçici türüdür.

.btn {
  background-color: green;
  color: white;
}

HTML örneği:

<button class="btn">Tıkla</button>
<a class="btn">Link</a>

📌 Özellikleri:

• Birden fazla öğede kullanılabilir
• Yeniden kullanılabilir tasarım yapıları oluşturmak için idealdir
• Nokta (.) ile başlar

1.3 ID Selector – Kimlik Seçici

Belirli bir ID’ye sahip tek ve benzersiz öğeyi seçer.

#header {
  background-color: black;
}

HTML örneği:

<div id="header"></div>

📌 Özellikleri:

• Sayfa içinde benzersiz olmalıdır
• Diğer seçicilere göre daha yüksek önceliğe (specificity) sahiptir
• # işareti ile başlar

1.4 Universal Selector – Evrensel Seçici

Sayfadaki tüm öğeleri seçer.

* {
  margin: 0;
  padding: 0;
}

Genellikle CSS reset işlemleri için kullanılır.

⚠️ Dikkat: Aşırı kullanımı performans sorunlarına yol açabilir.

2️⃣ Combinators (İlişkisel Seçiciler)

Bu seçiciler, HTML öğeleri arasındaki ilişkilere göre seçim yapar.

2.1 Descendant Selector – Alt Eleman Seçici (A B)

A öğesinin içindeki tüm B öğelerini seçer (her seviyede).

div p {
  color: red;
}

Bu kod, <div> içindeki tüm <p> etiketlerini seçer.

📌 İç içe yapılar için idealdir.

2.2 Child Selector – Doğrudan Çocuk Seçici (A > B)

Sadece A öğesinin doğrudan altındaki B öğelerini seçer.

div > p {
  color: green;
}

Bu, sadece birinci seviyedeki <p> öğelerini etkiler.

2.3 Adjacent Sibling – Bitişik Kardeş Seçici (A + B)

A öğesinden hemen sonra gelen ilk B öğesini seçer.

h1 + p {
  font-weight: bold;
}

Bu, <h1>’den hemen sonra gelen ilk <p> öğesini seçer.

2.4 General Sibling – Genel Kardeş Seçici (A ~ B)

A’dan sonra gelen tüm B kardeşlerini seçer.

h1 ~ p {
  color: gray;
}

Aynı seviyede olup h1’den sonra gelen tüm p’leri etkiler.

3️⃣ Attribute & Pseudo-Class Selectors

(Öznitelik ve Sözde Sınıf Seçicileri)

3.1 Attribute Selector – Özellik Seçici

Belirli bir attribute değerine göre seçim yapar.

Temel kullanım:

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

Bu, sadece type="text" olan input alanlarını seçer.

Diğer örnekler:

a[target] { }
a[href^="https"] { }   /* https ile başlayan */
a[href$=".pdf"] { }    /* .pdf ile biten */
a[href*="example"] { } /* içinde example geçen */

📌 Form tasarımlarında ve özel link yapılandırmalarında sık kullanılır.

3.2 Pseudo-Class Selector – Sözde Sınıf Seçici

Öğelerin durumuna veya konumuna göre seçim yapar.

Durum (State) Seçicileri

a:hover {
  color: red;
}

input:focus {
  border-color: orange;
}

Yaygın pseudo-class örnekleri:

• :hover → Üzerine gelince
• :focus → Odaklanınca
• :active → Tıklanırken
• :visited → Ziyaret edilmiş link
• :disabled → Devre dışı eleman

Konum (Position) Seçicileri

li:first-child {
  color: blue;
}

li:nth-child(2) {
  color: red;
}

Yaygın konum seçicileri:

• :first-child
• :last-child
• :nth-child(n)
• :nth-of-type(n)
• :not(selector)

📌 Dinamik liste tasarımlarında çok kullanışlıdır.

🎯 CSS Specificity (Öncelik Kuralları)

CSS’te hangi stilin uygulanacağını belirleyen kurala Specificity denir.

Öncelik sırası:

1. Inline style (style=””)
2. ID (#id)
3. Class (.class), attribute, pseudo-class
4. Element selector
5. Universal selector (*)

Örnek:

#box { color: red; }
.box { color: blue; }
div { color: green; }

ID en güçlü olduğu için kırmızı uygulanır.

🚀 Profesyonel CSS Seçici Kullanım Önerileri

✔ ID yerine mümkün olduğunca class kullanın
✔ Çok derin descendant seçicilerden kaçının
✔ Performans için gereksiz universal kullanımını azaltın
✔ Proje büyüdükçe BEM metodolojisi kullanın
✔ Specificity savaşlarından kaçının

🔥 Sonuç

CSS Selectors, web tasarımının temelidir.

Temel seçiciler yapıyı oluşturur, kombinasyon seçiciler ilişkileri tanımlar, attribute ve pseudo-class seçiciler ise dinamik ve modern tasarımın kapısını açar.

Seçicileri doğru kullanmak:

• Daha temiz kod
• Daha yüksek performans
• Daha kolay bakım
• Daha profesyonel projeler

anlamına gelir.