{{Glossary("CSS")}}, seçicileri {{glossary("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üklenmesi, dosyalarla ç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 |
Ş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.
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.
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.
{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}}
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;
} 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.
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 { }
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"] { }
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 { }
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 { }
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.
{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
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ş |