CSS Pseudo-Sınıf Referans Kılavuzu

CSS Sözde Sınıfları

Sözde sınıflar, elementlerin özel durumlarını tanımlamak için kullanılır.

Örneğin, bu kullanılabilir:

  • Kullanıcı fareyi element üzerinde tuttuğunda stil ayarlayın
  • Ziyaret edilmiş ve ziyaret edilmemiş bağlantılara farklı stiller ayarlayın
  • Bir element odaklandığında stil ayarlayın
  • Geçerli/Geçersiz/Gerekli/İsteğe bağlı form elementlerine stil ayarlayın

Aşağıdaki tablo, CSS'teki farklı sözde sınıfları gösterir:

Sözde sınıf Örnek Örnek açıklaması
:active a:active Aktif bağlantıları seçin
:any-link a:anylink href özelliği olan tüm <a> veya <area> elementlerini seçin.
:auto-fill input:autofill Tarayıcı tarafından otomatik olarak doldurulan değerleri olan tüm <input> elementlerini seçin.
:checked option:checked Tüm seçili <input> veya <option> elementlerini eşleştirin.
:default input:default Bir grup ilgili elementten varsayılan form elementini seçin.
:defined :defined Tüm tanımlanmış elementleri (standart veya özelleştirilmiş elementler) seçin.
:dir() :dir(rtl) Belirli metin yönüne sahip elementleri seçin.
:disabled option:disabled Genellikle form elementlerinde kullanılan tüm devre dışı bırakılmış elementleri seçin.
:empty div:empty Tüm alt elementleri içermeyen (metin düğümleri de dahil) elementleri seçin.
:enabled input:enabled Etkin tüm elementleri seçin, sıklıkla form elementlerinde kullanılır.
:first @page :first Yazdırılacak belgenin ilk sayfasını temsil eder (@page kurallarıyla birlikte kullanılır).
:first-child p:first-child Bir grup kardeş elementin içinde ebeveyn elementinin ilk alt elementi olan elementi seçin.
:first-of-type li:first-of-type Bir grup kardeş elementin içinde belirli bir türdeki ilk elementi seçin.
:focus select:focus Sıklıkla form elementlerinde kullanılan fokus alan elementleri seçin.
:focus-visible button:focus-visible Fokus alan elementi seçin (sadece klavye ile fokuslandığında uygulanır).
:focus-within form:focus-within Fokus alan element veya herhangi bir soy elementi ile eşleşen elementleri seçin.
:fullscreen :fullscreen Tam ekran modunda olan elementleri seçin.
:has() h2:has(+p) <p> elementinin ardından gelen <h2> elementini seçin ve <h2> elementine stil uygulayın.
:hover a:hover Fare ile üzerine gelmiş olan elementleri seçin.
:in-range input:in-range Değeri belirtilen aralıkta olan <input> elementlerini seçin.
:indeterminate input:indeterminate Belirsiz durumda olan form elementlerini seçin.
:invalid input:invalid Geçersiz form elementlerini seçin.
:is() :is(ul, ol) Tüm <ul> ve <ol> elementlerini seçin.
:lang() p:lang(it) lang özelliği "it" (İtalyanca) olan <p> elementlerini seçin.
:last-child li:last-child Seçin, ebeveyn elementi olarak son alt elementi olan <li> elementi.
:last-of-type p:last-of-type Seçin, <p> elementinin ebeveyn elementi olarak son <p> elementi.
:left @page :left Yazdırılacak belgenin tüm sol sayfalarını temsil eder (@page kurallarıyla birlikte kullanılır).
:link a:link Bütün ziyaret edilmemiş bağlantıları seçin.
:modal :modal Modülatif durumda olan elementleri seçin.
:not() :not(p) Tüm <p> elementi olmayan elementleri seçin.
:nth-child() p:nth-child(2) Seçin, <p> elementinin ikinci alt elementi olarak kullanılan <p> elementi.
:nth-last-child() p:nth-last-child(2) Annesi elementinin son ikinci çocuğu olarak seçilen <p> elementini seçin.
:nth-last-of-type() p:nth-last-of-type(2) Annesi elementinin son ikinci <p> elementi olarak seçilen <p> elementini seçin.
:nth-of-type() p:nth-of-type(2) Annesi elementinin ikinci <p> elementi olarak seçilen <p> elementini seçin.
:only-child p:only-child Annesi elementinin tek çocuğu olarak seçilen <p> elementini seçin.
:only-of-type p:only-of-type Annesi elementinin tek <p> elementi olarak seçilen <p> elementini seçin.
:optional textarea:optional required özelliğine sahip olmayan <input>、<select> veya <textarea> elementlerini seçin.
:out-of-range input:out-of-range Belirtilen aralık dışında değerleri olan <input> elementlerini seçin.
:placeholder-shown input:placeholder-shown Mevcut olarak yeraltı metnini gösteren <input> veya <textarea> elementlerini seçin.
:popover-open :popover-open Görünür popup durumunda olan elementleri seçin.
:read-only input:read-only readonly özelliğine sahip girdi elementlerini seçin.
:read-write input:read-write Düzenlenebilir girdi elementlerini seçin.
:required input:required required özelliğine sahip girdi elementlerini seçin.
:right @page :right Belgenin tüm sağ sayfalarını yazdırır ( @page kuralı ile birlikte kullanılır).
:root :root Belgenin kök elementini seçin.
:scope :scope Seçici ile eşleşen referans noktası veya aralığı olan elementleri seçin.
:state() :state() Belirli özelleştirilmiş durumuna sahip özelleştirilmiş elementi seçin.
:target :target Geçerli hedef elementi seçin.
:user-invalid :user-invalid Kullanıcı ile etkileşimde bulunmasından sonra geçersiz değerlere sahip form elementlerini seçin.
:user-valid :user-valid Kullanıcı ile etkileşimde bulunmasından sonra geçerli değerlere sahip form elementlerini seçin.
:valid input:valid Tüm geçerli değerlere sahip girdi elementlerini seçin.
:visited a:visited Ziyaret edilmiş tüm bağlantıları seçin.
:where() :where(ol, ul) Tüm <ul> ve <ol> elementlerini seçin.