CSS seçicileri

CSS, seçicileri HTML belgeleri içerisindeki web sayfamızı oluşturan öğeleri hedeflemek için kullanılır. Biçimlendirilecek öğeleri seçerken ince hassasiyete sahip çok çeşitli CSS seçicileri mevcuttur. Bu derste ve alt derslerde, bunların nasıl çalıştırklarını görecek ve farklı türlerini ayrıntılı olacak iceleyeceğiz.

Ön koşullar: Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesidosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç: CSS seçicilerin nasıl çalıştığını ayrıntılı olarak öğrenmek

Seçici nedir?

Şimdiye kadar bir çoğuyla tanıştın. Bir CSS seçici, bir CSS kuralının ilk kısmıdır. Bu, tarayıcıya kural içindeki CSS bildirimlerinin uygulanabilmesi için hangi HTML öğesinin seçilmesi gerektiğini söyleyen ve diğer terimlerden oluşan bir kalıptır. Seçici tarafından seçilen öğe veya öğeler, seçicinin konusu olarak anılır.

Some code with the h1 highlighted.

Daha önceki makalelerde, bazı farklı seçicilerle tanıştın ve belgeyi farklı şekillerde hedefleyen seçiciler olduğunu öğrendin — örn. bir h1 birinci dereceden başlıkları seçen seçiciyle .special gibi bir sınıf seçici.

CSS'de seçiciler CSS seçicileri standardizasyonunda tanımlanır ve çalışabilmeleri için CSS'in diğer parçaları gibi tarayıcılarda desteğe sahip olmaları gerekir. karşılaşacağın seçicilerin çoğu, olgun bir özellik olan Seviye 3 Seçiciler standardizasyonunda tanımlanmıştır. Bu nedenle bu seçiciler için mükemmel tarayıcı desteği bulacaksın.

Seçici listeleri

Aynı CSS'i kullanan birden fazla öğenin bulunduğu durumlarda, her öğe için ayrı ayrı seçicilerle kural oluşturmaktansa, kuralın tüm öğelere uygulanması için kuralı seçici listelerinde birleştirebiliriz. Örn.i hem  h1 hemde .special sınıfı için aynı CSS'e kullanacaksam, bunu iki ayrı kural olarak yazabilirim.

h1 { 
  color: blue; 
} 

.special { 
  color: blue; 
} 

Ayrıca seçici etiketlerinin arasına virgül ekleyerek bunları bir seçim listesinde birleştirebilirim.

h1, .special { 
  color: blue; 
} 

Beyaz boşluk virgülden önce veya sonra geçerlidir. Ayrıca, her biri yeni bir satırdaysa, seçicileri daha okunabilir bulabilirsin.

h1, 
.special {
  color: blue; 
} 

Aşağıdaki etkileşimli örnekte, aynı bildirimlere sahip iki seçiciyi birleştirmeyi dene. Görsel sunum birleştirilden sonra aynı olmalıdır.

 

Seçicileri bu şekilde grupladığında, herhangi bir seçici geçersizse, kuralın tamamı yok sayılacaktır.

Aşağıdaki örnekte, geçersiz sınıf seçici kuralı yok sayılacak, oysa h1 öğesine stil uygulanmaya devam edecektir.

h1 { 
  color: blue; 
} 

..special { 
  color: blue; 
} 

Ancak birleştirildiğinde, geçersiz sınıf bildiriminden dolayı kuralım tümü geçersiz sayılacaktır.

h1, ..special { 
  color: blue; 
} 

Seçici türleri

Birkaç farklı seçici grubu vardır ve hangi tür seçiciye itiyacın olduğunu bilmek, çalışman için doğru aracı bulmana yardımcı olacaktır. Bu dersimizin alt derslerinde, farklı seçici gruplarına daha ayrıntılı olarak bakacağız.

Tür, sınıf ve kimlik seçicileri

Bu grup, HTML öğesini hedefleyen seçicileri <h1>.

h1 { }

Sınıfı hedefleyen seçicileri:

.box { }

ve bir kimliği hedefleyen seçicileri içerir:

#unique { }

nitelik seçicileri

Bu grup, bir öğedeki belirli bir özelliğin varlığına bağlı olarak öğeleri seçmen için sana farklı yollar sunar:

a[title] { }

Veya belirli bir değere sahip bir niteliğin varlığına göre bir seçim yapar:

a[href="https://example.com"] { }

Sözde sınıf ve sözde öğeler

Bu grub, bir öğenin belirli durumlarını biçimlendiren sözde sınıfları içeri. Örn., :hover sözde sınıfı fare işaretçisiyle üzerine gelinmiş bir bağlantıyı seçer.

a:hover { }

Ayrıca, öğenin kendisi yerine bir öğenin belili bir bölümünü seçen sözde öğeleri de içerir. Örn., ::first-line her zaman bir öğenin (<p> aşağıdaki durumda) içindeki ilk metin satırını seçer, sanki <span> öğesiyle etrafına sarılmış ve sonra seçilmiş gibi davranır.

p::first-line { }

Birleştiriciler

Son seçici gurubu, belgelerimizdeki öğeleri hedeflemek için diğer seçicileri birleştirir. Örn., aşağıda<article> öğesini alt birleştirici (>) kullanarak öğenin doğrudan çocukları olan paragrafları seçer:

article > p { }

Sıradaki

Bundan sonra MDN'deki çeşitli seçici türlerine doğrudan bağlantılar için aşağıdaki referans tablosuna bakabilir veya Eğitim bölümümüzdeki tür, sınıf ve kimlik seçicileri sayfasına geçerek yolculuğuna başlayabilirsin.

Seçiciler referans tablosu

Aşağıdaki tablo, her bir seçici türünü nasıl kullanacağını gösteren kılavuz sayflarına bağlantılar ve kullanabileceğin seçicilere genel bir bakış sunar. Ayrıca, tarayıcı destek bilgilerini kontrol edebileceğin her seçici için MDN sayfasına bi bağlantı ekledim. Bunu, çalışmanda veya CSS ile denemeler yaparken bakabileceğin bir referans olarak kullanabilirsin.

Seçici Örnek CSS Eğitim sayfası
Tür seçici h1 {  } Tür seçiciler
Evrensel seçici * {  } Evrensel seçici
Sınıf Seçici .box {  } Sınıf Seçici
Kimlik seçici #unique { } Kimlik seçiciler
Nitelik seçici a[title] {  } Nitelik seçiciler
Sözde sınıf seçiciler p:first-child { } Sözde sınıflar
Sözde öğe seçiciler p::first-line { } Sözde sınıflar
Torun birleştiricil article p Torun birleştirici
Çocuk birleştirici article > p Çocuk birleştirici
Bitişik kardeş birleştirici h1 + p Bitişik kardeş
Genel Kardeş birleştirici h1 ~ p Genel kardeş

Bu kısımda

  1. Kaynak sırası ve miras
  2. CSS seçicileri
  3. Kutu modeli
  4. Arka planlar ve kenarlıklar
  5. Farklı metin yönleri kullanma
  6. Taşan içerik
  7. Değerler ve birimler
  8. CSS'de öğelerin boyutları
  9. Görseller, medya ve form öğeleri
  10. Tabloları şekillendirme
  11. CSS'de hata ayıklama
  12. CSS'ini düzenleme