Css pseudo (sözde) etiketler, sınıflar ve seçiciler
1898 0

Pseudo (Sözde) Elementler, Sınıflar ve Seçiciler

Pseudo element ve pseudo sınıf arasındaki farkı anlamaya çalışarak başlayalım. Aslında söylenmek istenen şey yapısı gereği bir etikete mi benziyor yoksa seçiciye mi? Mesela :first-line ilk satır anlamına geliyor ve öyle olmasa da bir etiket gibi davranıyor yada :hover fare üzerine geldiğinde gibi bir anlamı var ve bu da onu bir sözde sınıf yapıyor.

Bence özetle şöyle söylenebilir, css'e işlevsellik katan özellikler.

Elementler

Pseudo Element Açıklama
:first-line Bir blok içeriğinin ilk satırının biçimlendirilebilmesi için kullanılır.
:first-letter Bir blok içeriğinin ilk yazı karakterini biçimlendirmek için kullanılır.
:before Bir elemanın öncesini biçimlendirmek için kullanılır.
:after Bir elemanın sonrasını biçimlendirmek kullanılır.

Sınıflar

Pseudo Sınıf Açıklama
:link Hiç tıklanmamış linklerin biçimlendirilmesi için kullanılır.
:active Linklerin tıklanma anını biçimlendirmek için kullanılır.
:visited Tıklanmış olan linkleri biçimlendirmek için kullanılır.
:hover Elementin üzerine fare ile gelindiğinde yapılamk istenen biçimlendirmeler için kullanılır.
:focus Odaklanma esnasında yapılacak biçimlendirmeler için kullanılır. Input elemanları sık kullanılır.
:enabled Ulaşılabilir durumda olan input elemanlarının seçimi için kullanılır.
:disabled Etkisiz durumda olan input elemanlarının seçimi için kullanılır.
:checked İşaretli olan radio veya checkbox elementlerinin seçimi için kullanılır.

Seçiciler

Pseudo Seçici Açıklama
:root Dokümanın kökünü temsil eder.
E:empty Alt elemanı(çocuk) olmayan elemanları yakalamak için kullanılır. 
:not(E) E olmayanları seçer.
E:nth-child(n) E elementi ile aynı düzeyde bulunan elemanları seçmek için kullanılır. n yerine rakam verirseniz o sıradaki eleman seçilir veya (3n+1) şeklinde bir formül de girilebilir yada son olarak odd(çift), even(tek) olacak şekilde bir seçim yapılabilir.. Daha sonraki nth seçicileri için de bu geçerlidir. 
E:nth-last-child(n) nth-child ile aynı mantığa sahiptir, tek fark belirtilen değer sondan başa doğru olacak şekildedir.
E:nth-of-type(n) Aynı tipteki elemanların seçiminde kullanılır.
E:nth-last-of-type(n)  Aynı tipteki elemanların sondan başa doğru seçilmesinde kullanılır.
E:last-child Aynı seviyedeki elemanların en sonuncusunu seçmek için kullanılır.
E:first-child Aynı seviyedeki elemanların ilkini seçmek için kullanılır.
E:first-of-type Aynı seviyedeki ilk aynı tipteki elemanı seçmek için kullanılır. 
E:last-of-type Aynı seviyedeki ilk aynı tipteki elemanı seçmek için kullanılır. 
E:only-child Bir ebeveyni olan ve bu ebeveynin tek çocuğu olan elemanları seçmek için kullanılır.
E:only-of-type Bir ebeyni olan ve bu ebeveynin aynı etiket adına sahip tek çocuğu olan elemanları seçmek için kullanılır.

 

^
X