CSS Seçiciler (Selectors)

Web tasarımına başlarken HTML ile sayfanızın yapısal iskeletini kurduktan sonra, bu iskelete renk, boyut, boşluk ve estetik kazandırmak için CSS (Cascading Style Sheets – Basamaklı Stil Şablonları) kullanmanız gerekir. Ancak CSS’in sihirli dünyasına adım atmadan önce çözmeniz gereken en temel konu, stil vermek istediğiniz HTML etiketini doğru bir şekilde işaret edebilmektir. İşte CSS’te, HTML belgesindeki belirli etiketleri ve nitelikleri eşleştirerek hangi stillerin nereye uygulanacağını belirleyen bu yapılara Seçiciler (Selectors) adı verilir.

CSS kuralları temel olarak iki kısımdan oluşur: Hangi elemanın şekillendirileceğini belirten “seçici” ve o elemana uygulanacak kuralları içeren “bildirim bloğu”. Doğru seçiciyi kullanmak, kodunuzu temiz tutmanın, performansı artırmanın ve web sitenizi tüm arama motorları (SEO) için daha hızlı okunabilir hale getirmenin ilk şartıdır. Bu kapsamlı rehberde, web geliştirme sürecinizde en çok kullanacağınız CSS seçicilerini, bunların nasıl çalıştığını ve modern kodlama standartlarını bol örneklerle öğreneceksiniz.

1. Temel Seçiciler (Basic Selectors)

CSS yazmaya başladığınızda ilk karşılaşacağınız ve projelerinizin %80’ini oluşturacak en temel seçiciler şunlardır:

Evrensel Seçici (Universal Selector – *) Yıldız (*) işareti ile gösterilir. Sayfadaki hiçbir istisna gözetmeksizin tüm HTML elemanlarını seçer. Genellikle tarayıcıların varsayılan olarak eklediği iç ve dış boşlukları (margin ve padding) sıfırlamak için kullanılır.

* {
  margin: 0;
  padding: 0;
}

Tip / Etiket Seçici (Type/Element Selector) HTML belgesindeki doğrudan bir etiket adını kullanarak (h1, p, div, a vb.) o türe ait olan tüm elemanları seçer.

h1 { color: red; } /* Sayfadaki tüm ana başlıkları kırmızı yapar */

Sınıf Seçici (Class Selector – .sinif-adi) Sınıf seçiciler, nokta (.) sembolü ile başlar ve HTML’de class özniteliği ile işaretlenmiş birden fazla elemanı seçmek için kullanılır. Bir web sayfasında farklı türdeki birçok HTML etiketine aynı sınıf adını vererek ortak bir stil oluşturabilirsiniz. Sınıf isimleri büyük/küçük harf duyarlıdır ve harflerle başlamalıdır.

.uyari { color: yellow; } /* class="uyari" olan tüm elemanları sarı yapar */

Kimlik Seçici (ID Selector – #kimlik-adi) Kimlik seçiciler, diyez veya hashtag (#) işareti ile başlar ve HTML’de benzersiz (unique) bir id özniteliği taşıyan tek bir elemanı hedefler. Sınıfların aksine, bir belgede aynı ID’ye sahip birden fazla eleman bulunmamalıdır.

#ana-menu { background-color: green; } /* id="ana-menu" olan tekil elemanı seçer */

2. Birleştirici ve İlişkisel Seçiciler (Combinators)

Gerçek dünyadaki web projelerinde HTML etiketleri her zaman iç içe geçmiş bir hiyerarşi (soy ağacı) oluşturur. Bir elemanı seçerken onun bulunduğu konuma göre daha özel seçimler yapmak için birleştirici seçiciler kullanılır:

• Alt Eleman Seçici (Descendant Selector – Boşluk): E F formatında yazılır. E elemanının içinde yer alan (ne kadar derinde olursa olsun) tüm F elemanlarını seçer. Örnek: p strong { color: purple; } (Bir paragrafın içindeki tüm kalınlaştırma etiketlerini mor yapar).
• Doğrudan Çocuk Seçici (Child Selector – >): E > F formatında yazılır. Yalnızca E elemanının doğrudan çocuğu (ilk alt kademe) olan F elemanlarını seçer. Örnek: body > p { background-color: yellow; } (Doğrudan body etiketine bağlı olan paragrafları seçer, iç içe kutulardaki paragraflara dokunmaz).
• Bitişik Kardeş Seçici (Adjacent Sibling Selector – +): E + F formatında yazılır. E elemanından hemen sonra gelen ilk F kardeş elemanını seçer. Örnek: h1 + p { color: red; } (Sadece ana başlıktan hemen sonra başlayan ilk paragrafı kırmızı yapar).
• Genel Kardeş Seçici (General Sibling Selector – ~): CSS3 ile gelen bu özellik E ~ F formatındadır. E elemanından sonra gelen ve onunla aynı seviyede (kardeş) olan tüm F elemanlarını seçer.

3. Öznitelik Seçiciler (Attribute Selectors)

Sadece sınıf ve ID’ler yerine, bir HTML etiketinin taşıdığı özniteliklere (örneğin bir bağlantının gittiği adres veya bir resmin kaynağı) göre de spesifik stiller verebilirsiniz:

• E[attr]: Belirli bir özniteliğe sahip olanları seçer. Örn: a[href] (Sadece bağlantısı olan <a> etiketleri).
• E[attr="deger"]: Özniteliği tam olarak verilen değere eşit olanları seçer. Örn: a[href="https://ornek.com"] { font-weight: bold; }.
• E[attr^="deger"]: CSS3 özelliği olan bu operatör (^=), özniteliği belirtilen kelime ile başlayanları seçer.
• E[attr$="deger"]: Özniteliği belirtilen kelime ile bitenleri seçer. Özellikle belli bir dosya türüne giden linkleri şekillendirmek için harikadır (Örn: .pdf ile biten linklerin yanına PDF ikonu koymak).
• E[attr*="deger"]: Özniteliğin değerinin içinde belirtilen kelimeyi içerenleri seçer.

4. Sözde Sınıflar (Pseudo-Classes) ve Sözde Elemanlar (Pseudo-Elements)

Web siteleri statik yapılar değildir; kullanıcı sayfayla etkileşime girdikçe bazı elemanların görünümünün değişmesi gerekir. HTML kodunda somut olarak bulunmayan ancak kullanıcının etkileşimine veya sayfanın yapısına göre oluşan bu durumlar için “Sözde Sınıflar” ve “Sözde Elemanlar” kullanılır.

En Önemli Sözde Sınıflar (Pseudo-Classes): Tek iki nokta (:) ile kullanılırlar.

• :hover: Kullanıcı fare (mouse) imleci ile elemanın üzerine geldiğinde uygulanacak stili belirler. (Örn: a:hover { color: red; }).
• :focus: Bir form kutusuna tıklandığında veya klavye ile odaklanıldığında devreye girer. Web erişilebilirliği (accessibility) için hayati bir öneme sahiptir.
• :first-child ve :last-child: Bir ebeveynin sırasıyla ilk ve son çocuğunu seçmek için kullanılır. Menülerde ilk ve son elemanın kenarlıklarını ayarlarken çok kullanışlıdır.
• :nth-child(n): Bir grup kardeş eleman arasında kaçıncı sıradaki elemanın seçileceğini belirtir. Zebra desenli bir tablo yapmak için tr:nth-child(odd) veya tr:nth-child(even) kullanılır.
• :not(s): Bir olumsuzlama (negation) filtresidir. İçine yazdığınız kuralı karşılamayan elemanları seçer. Örn: *:not(h1) { color: black; } (h1 olmayan her şeyi siyah yapar).

En Önemli Sözde Elemanlar (Pseudo-Elements): Modern CSS3 standartlarında çift iki nokta (::) ile kullanılırlar, ancak eski tarayıcı desteği için tek iki nokta ile de çalışırlar.

• ::before ve ::after: CSS’in en yaratıcı araçlarıdır. HTML kodunuzda olmayan bir içeriği (ikon, süsleme vb.) doğrudan CSS aracılığıyla bir elemanın önüne veya arkasına ekler (generate eder).
• ::first-letter ve ::first-line: Dergi ve gazetelerdeki gibi paragrafların sadece ilk harfini (drop-cap) veya ilk satırını seçerek büyütmenizi sağlar.
• ::selection: Kullanıcının web sayfasında farenin sol tuşuyla seçerek vurguladığı (highlight ettiği) metin parçasının arka plan ve yazı rengini değiştirmek için kullanılır.

5. CSS Çakışmaları: Özgüllük (Specificity) Algoritması

Birden fazla CSS seçicisi, HTML’deki aynı elemana farklı kurallar uygulatmaya çalışırsa ne olur? Örneğin bir başlığa Sınıf ile “mavi”, ID ile “kırmızı” rengi atarsanız tarayıcı hangisini seçecektir?

İşte CSS’in kalbini oluşturan bu hesaplama sistemine Özgüllük (Specificity) adı verilir. Tarayıcı, kuralların bir puanlamasını yapar ve en “ağır” (özel) olan kazanır. Özgüllük puanlaması 3 haneli bir formül (ID-Sınıf-Tip) ile hesaplanır:

1. ID Seçiciler (1,0,0): En güçlü yapı taşıdır. Kuralınızda # geçiyorsa puanı çok yüksektir.
2. Sınıf (Class), Sözde Sınıf ve Öznitelik Seçiciler (0,1,0): İkinci sıradaki öneme sahiptir.
3. Etiket (Type) ve Sözde Eleman Seçiciler (0,0,1): En genel ve zayıf seçicilerdir.

Örneğin; #kimlik-adi (1,0,0) seçicisi, .sinif-adi (0,1,0) seçicisinden her zaman daha baskındır. Evrensel seçicinin (*) ise özgüllük değeri 0,0,0‘dır ve diğer hiçbir kuralı ezemez. Bu yüzden profesyonel web geliştiricileri olarak id seçicilerini tasarım amaçlı kullanmaktan kaçınmalı ve sistemi kontrol etmesi daha kolay olan class (sınıf) tabanlı bir yapı benimsemelisiniz.

6. Temiz ve Bakımı Kolay (Maintainable) Kod İçin: BEM Metodolojisi

Yukarıdaki çok çeşitli CSS seçicilerini karmaşık bir şekilde iç içe geçirmek (Deep Nesting) her ne kadar mümkün olsa da (örn: body > main .makale p a:hover), bu yapı zamanla projenizi yavaşlatır, hata bulmayı (debugging) imkansız hale getirir ve SEO/Sayfa açılış hızı puanlarınızı düşürür. Tarayıcıların sayfadaki stilleri yorumlama hızını artırmak ve kod çakışmalarını (specificity wars) engellemek için BEM (Block, Element, Modifier) adı verilen modern isimlendirme standartları kullanılır.

BEM, sınıflara (class) anlamlı, işlevsel ve spesifikasyon puanı düşük isimler vermeyi hedefler.

• Block (Blok): İşlevsel, bağımsız bir ana yapıdır (Örn: buton, kart).
• Element (Eleman): Bloğun içindeki bir parçadır. İki alt çizgi ile ayrılır (Örn: buton__ikon, kart__baslik).
• Modifier (Değiştirici): Elemanın özel bir varyasyonudur. İki tire ile ayrılır (Örn: buton--buyuk, kart--karanlik-tema).

Bu modüler ve anlamlandırılmış “sınıf” (class) tabanlı BEM yapısını kullanarak web sitenizde <div> karmaşasının önüne geçebilir, temiz (clean code), arama motorları için erişilebilir ve devasa projelere uyarlandığında dahi bozulmayan (scalable) mükemmel CSS mimarileri kurabilirsiniz. Unutmayın, iyi bir CSS sadece doğru çalışanı değil, yıllar sonra okunup değiştirilmesi en kolay olan koddur.