CSS pseudo-class seçiciler tek : ile belirtilir. pseudo element seçiciler ise ::before şeklinde gösterilir. W3C (Wold Wide Web Consortium) :pseudo-class ve ::pseudo-element arasındaki ayrımı yapabilmek için bunu bu şekilde tasarlamayı uygun görmüştür.
Pseudo class seçiciler bir eleman üzerinde mouse ile gelindiğinde olduğunda, bir input içerisine tıknalıdığında gibi bir çok değişik durumu seçerek stillendirmeniz için tasarlanmıştır.
:pseudo-class şeklinde kullanılır. Aşağıda detaylı pseudo-class listesini inceleyiniz.
Ençok Kullanılan Sözde Sınıf CSS Seçicileri
| pseudo-class | Örnek | Açıklama |
|---|---|---|
| :active | a:active | Aktif olan linki seçer. |
| :viseted | a:viseted | Tüm ziyaret edilmiş linkleri seçer |
| :hover | a:hover | Bir HTML öğesi üzerinde fare ile gelindiğinde nasıl görüneceğini stillendirmenizi sağlar. |
| :focus | a:focus | Link öğesine tıknalıdığı anda nasıl görüneceğini stillendirmenizi sağlar. |
| :checked | input:checked | checkbox ve radio input giriş elemanlarında seçili olanı belirtmek için kullanılır. |
| :enabled | input:enabled | Kullanılabilir ve tıklanabilir input ve button öğelerini belirtmek için kullanılır. |
| :disabled | input:disabled | Etkin kullanıma sahip olmayan pasif input ve button elemanlarını belirtmek için kullanılır. |
| :optional | input:optional | zorunlu giriş olmayan input elemanlarını stillendirmek için kullanılır. |
| :required | input:required | Bilgi girilmesi zorunlu ya da seçilmesi zorunlu tutulmuş input ve form elemanlarını seçmek için kullanılır. |
| :read-only | input:read-only | Sadece okunabilir şekilde etkin olmayan input elemanlarını seçmek ve stillendirmek için kullanılır. |
| :not(secici) | :not(.myClass) | seçmek istediğiniz öğlelerin dışında hariç tutmak istediğiniz öğeyi de belirtmek için kullanılır. örnek div:not(.myDiv) denildiğinde my-div clasname'e sahip div dışındaki tüm div elemanlarını seçmiş olursunuz. |
| :first-child | p:first-child | ilk çocuk elemanı seçmek için kullanılır. |
| :last-child | div:last-child | Son sıradaki çocuk elemanı seçmek için kullanılır. Birçok HTML öğelerine uygulanabilir. |
| :nth-child(n) | p:nth-child(2) | p:nth-child(2) şeklinde yazıldığında 2. çocuk p öğesi seçilmiş olur. |
| :nth-last-child(n) | div:nth-last-child(2) | div:nth-child(2) şeklinde yazıldığında sondan 2. çocuk div öğesi seçilmiş olur. |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | p:nth-child(2) şeklinde yazıldığında son alt p öğesinden başlayarak tüm 2. p öğelerini seçer. |
| :nth-of-type(n) | p:nth-of-type(2) | p:nth-of-type(2) şeklinde yazıldığında üstten başlayarak 2. sıradaki tüm p öğelerini seçer. |
| :only-of-type | p:only-of-type | p:only-of-type öğesi ebevyni içerisinde sadece 1 adet p öğesi varsa oradaki p elemanını seçer. Eğer ebeveyn içersinde biden fazla p öğesi varsa oradaki p öğeleri :only:of-type ile seçilemez. |
| :only-child | p:only-child | p:only-child ve p:only-of-type arasındaki fark p:only-child ta ebeveyn içerisinde p öğesi dışında başka bir öğe olsa dahi oradaki p öğesi seçilmez. p öğesinin seçilebilmesi için ebevyninin içerisinde 1 adet p öğesi dışında başka bir eleman olmamalıdır. |
| :lang | a:lang(en) | a:lang(en) diye belirtildiğinde lang="en" özniteliğine sahip olan link öğelerini seçmiş olursunuz. |