Sözde Sınıf (pseudo-class) Seçiciler
Bir HTML ögesinin farklı durumlarına özel CSS kuralları tanımlamak için sözde sınıf (pseudo-class) seçicilerden faydalanılır. Sözde sınıf seçilerileri kullanarak; Bir HTML ögesine odaklandığınızda, mouse ile üzerine geldiğinizde, tıkladığınızda ya da bir bağlantıyı ziyaret ettiğinizde nasıl biçimlendirilmesi gerektiğini tanımlayabilirsiniz.
Bir sözde sınıf CSS kuralı oluşturmak için şu sözdizimi kullanılır:
secici:sozde-sinif {
ozellik: deger;
}
Bağlantılara Özgü Sözde Sınıflar
Web bağlantılarına özgü 4 farklı sözde sınıf bulunur: link, visited, hover ve active'dir. Bağlantılara özgü sözde sınıfları kullanarak bir CSS kuralı oluştururken sıralama önemlidir. Bu nedenle verdiğim örnekteki sıralamayı takip etmeye özen göstermenizde fayda olacaktır.
Bir Kullanım Örneği: İpucu
Hover sözde sınıfı, bağlantılar haricinde diğer tüm HTML ögeleri içinde kullanılabilir. Basit bir ipucu (tooltip) örneği yaparak kullanım detaylarına göz atalım:
Tüm Sözde Sınıf Seçicilerin Listesi
| Seçici | Örnek | Örneğin Açıklaması |
|---|---|---|
| :active | a:active | Aktif bağlantıyı seçer. |
| :checked | input:checked | İşaretlenmiş tüm input etiketlerini seçer. |
| :disabled | input:disabled | Kullanılmayan tüm input etiketlerini seçer. |
| :empty | p:empty | İçinde hiçbir HTML ögesi bulunmayan tüm p etiketlerini seçer. |
| :enabled | input:enabled | Kullanılan tüm input etiketlerini seçer. |
| :first-child | p:first-child | İçinde bulunduğu etiketin ilk ögesi olan tüm paragrafları seçer. |
| :first-of-type | p:first-of-type | İçinde bulunduğu etiketin, p türündeki ilk ögesini seçer. |
| :focus | input:focus | Odaklanılmış olan input etiketini seçer. |
| :hover | a:hover | Bağlantının hover (fare ile üzerine gelmek) durumunu seçer. |
| :in-range | input:in-range | Belli bir sayı aralığında değere sahip olan input etiketlerini seçer. |
| :invalid | input:invalid | Geçersiz bir değer almış olan tüm input etiketlerini seçer. |
| :lang(dil) | p:lang(tr) | lang özelliği tr yani Türkçe olarak ayarlanmış tüm p etiketlerini seçer. |
| :last-child | p:last-child | İçinde bulunduğu etiketin son ögesi olan p etiketlerini seçer. |
| :last-of-type | p:last-of-type | İçinde bulunduğu etiketin p türündeki en son ögesini seçer. |
| :link | a:link | Ziyaret edilmemiş tüm bağlantıları seçer. |
| :not(secici) | :not(p) | p etiketi olmayan tüm ögeleri seçer. |
| :nth-child(n) | p:nth-child(2) | İçinde bulunduğu etiketin ikinci ögesi olmayan tüm p etiketlerini seçer. |
| :nth-last-child(n) | p:nth-last-child(2) | İçinde bulunduğu etiketin sondan ikinci ögesi olmayan tüm p etiketlerini seçer. |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | İçinde bulunduğu etiketin, p türünde ve sondan ikinci olmayan tüm p etiketlerini seçer. |
| :nth-of-type(n) | p:nth-of-type(2) | İçinde bulunduğu etiketin p türündeki tüm ikinci ögelerini seçer. |
| :only-of-type | p:only-of-type | İçinde bulunduğu etiketin yalnızca p türündeki ögelerini seçer. |
| :only-child | p:only-child | İçinde bulunduğu etiketin yalnızca tek ögesi olan p etiketlerini seçer. |
| :optional | input:optional | Zorunlu olmayan tüm input etiketlerini seçer. |
| :out-of-range | input:out-of-range | Belirli bir değer aralığı dışında kalan input etiketlerini seçer. |
| :read-only | input:read-only | Yalnızca okuma özelliğine sahipi input etiketlerini seçer. |
| :read-write | input:read-write | Yalnızca okuma özelliğine sahip olmayan input etiketlerini seçer. |
| :required | input:required | Zorunlu olan tüm input etiketlerini seçer. |
| :root | root | Belgenin kök (root) ögesini seçer. |
| :target | #haber:target | target değeri haber olan tüm ögeleri seçer. |
| :valid | input:valid | Geçerli olan tüm input etiketlerini seçer. |
| :visited | a:visited | Ziyaret edilmiş tüm bağlantıları seçer. |