Tüm yaygın CSS seçicileri, ailelerine göre gruplandırılmış: temeller, birleştiriciler, pseudo-sınıflar, pseudo-elementler ve öznitelik seçicileri. Her satır, seçiciyi tek satırlık bir örnekle eşleştirir.
Bir seçici, kuralın hangi elementlere uygulanacağını belirler. Birden çok kural eşleştiğinde hangisinin kazanacağını spesifiklik belirler: inline, id'yi yener; id, sınıfı yener; sınıf, tipi yener. Seçicileri sağdan sola okuyun: tarayıcı önce en sağdaki parçayı eşleştirir, sonra birleştiriciler boyunca yukarı çıkar. Aşağıdaki aileler yazacağınız neredeyse her şeyi kapsar.
Referans tablosu · 53 kayıt
CSS SeçicileriExplained
53 of 53 rows
Temeller
O etiketin her elementi.
button { }
O sınıfa sahip elementler.
.active { }
O id'ye sahip tek element.
#header { }
Her element.
* { box-sizing: border-box; }
Belgenin kökü; genel özel özellikler için olağan yer.
:root { --gap: 1rem; }
A veya B ile eşleşen elementler (gruplama).
h1, h2, h3 { }
Birleştiriciler
A'nın soyundan gelen herhangi bir B.
nav a { }
A'nın doğrudan çocuğu olan B.
ul > li { }
A'dan hemen sonra gelen B, aynı ebeveyn.
h1 + p { }
A'yı izleyen her B, aynı ebeveyn.
h1 ~ p { }
Pseudo-sınıflar (durum)
İşaretçi üzerindeyken element.
a:hover { }
Klavye odağına sahip element.
input:focus { }
Ebeveyninin ilk çocuğu olan element.
li:first-child { }
n'inci çocuk; 2n gibi formüller alır.
tr:nth-child(2n) { }
İçteki hiçbir seçiciyle eşleşmeyen elementler; Selectors 4'ten beri liste alır.
li:not(:first-child, .skip) { }
İşaretli bir checkbox, radio veya option.
input:checked { }
Devre dışı bir input veya düğme.
button:disabled { }
İçteki seçici için bir eşleşme içeren ebeveyn.
li:has(ul) { }
Listedeki herhangi bir seçici; spesifiklik listedeki en yüksek olandır.
:is(ol, ul) li { }
:is() ile aynı, ama sıfır spesifiklikle.
:where(ol, ul) li { }
Halka gösterilmesi gereken odak, genellikle klavyeden.
a:focus-visible { }
Kendisinin veya bir alt elementinin odak aldığı element.
form:focus-within { }
Ebeveyninin son çocuğu olan element.
li:last-child { }
Kardeşi olmayan element.
p:only-child { }
Aynı etiketten n'inci kardeş; 2n gibi formüller alır.
p:nth-of-type(2n) { }
Aynı etiketten ilk veya son kardeş.
p:first-of-type { }
Çocuğu ve metni olmayan element.
td:empty { }
Ziyaret edilmemiş bağlantılar ve edilmiş bağlantılar.
a:visited { }
Zorunlu olarak işaretlenmiş girişler ve isteğe bağlı bırakılmış girişler.
input:required { }
Değeri kendi doğrulama kurallarından geçen ya da geçmeyen girişler.
input:invalid { }
Kullanıcının düzenleyemediği bir giriş.
input:read-only { }
Kimliği URL parçasıyla eşleşen element.
#note:target { }
Önceden seçilmiş seçenek veya bir grubun varsayılan düğmesi.
input:default { }
Betik tarafından belirsiz duruma ayarlanmış bir checkbox.
input:indeterminate { }
Herhangi bir yerleşik element, veya kaydedildiğinde özel element.
my-widget:defined { }
Verilen dildeki element.
p:lang(fr) { }
Pseudo-elementler
Elementten önce üretilmiş bir içerik düğümü.
label::before { content: ""; }
Elementten sonra üretilmiş bir içerik düğümü.
code::after { content: ";"; }
Bir metin bloğunun ilk harfi.
p::first-letter { }
Bir girişin yer tutucu metni.
input::placeholder { }
Bir metin bloğunun ilk satırı.
p::first-line { }
Kullanıcının vurguladığı metin.
::selection { }
Liste öğesinin madde işareti veya numarası.
li::marker { }
Tam ekran element veya diyalogun arkasındaki alan.
dialog::backdrop { }
Dosya girişinin içindeki gözat düğmesi.
input::file-selector-button { }
Host'un açığa çıkardığı bir shadow-DOM parçası.
my-widget::part(header) { }
Öznitelik seçicileri
Özniteliğe sahip elementler, değer her ne olursa olsun.