CSS İle 'a' Elementinin Seçicileri Nelerdir?
Bu yazımız CSS seçicileri yazısının son yazısıdır. Bu yazı <a href=''></a> elementini seçmek üzerine hazırlanmış bir yazıdır. Fakat örneğin ":active" yapısı Pseudo-class Seçiciler başlığı altında tanımlanmış bir özelliktir. Fakat neticesi itibariyle en çok kullanıldığı alan <a href=''></a> elementi olması nedeniyle bu yazıda sadece <a href=''></a> elementi için nasıl kullanılıyor bunu görmeye çalışacağız.
CSS ":active" Seçicisi:
Elementin tıklanıldığı anı temsil etmektedir. Sadece "a" elementine özel değildir. Fakat en çok "a" elementi için kullanılmaktadır.
<a href=''></a>a:active{
color: red;
}Yukarıdaki örnekte "a" elementine tıklanılması durumu, CSS ":active" özelliği ile seçilmiştir.
CSS ":hover" Seçicisi:
Mouse ile ilgili elementin üzerine gelme durumunu temsil etmektedir. Sadece "a" elementi için özel olan bir element değildir, diğer bütün HTML elementlerinde de kullanılmaktadır.
<a href=''></a>a:hover{
color: orange;
}Yukarıdaki örnekte "a" elementinin üzerine mouse ile gelinmesi durumu CSS ile yakalanmıştır.
CSS ":link" Seçicisi:
Ziyaret edilmemiş bağlantıları seçmek için kullanılır.
<a href=''></a>a:link{
color: blue;
}Yukarıdaki örnekte "a" elementinin ziyaret edilmemiş durumu, CSS ":link" özelliği ile seçilmiştir.
CSS ":visited" Seçicisi:
Ziyaret edilmiş bağlantıları seçmek için kullanılır.
<a href=''></a>a:visited{
color: purple;
}Yukarıdaki örnekte "a" elementinin ziyaret edilmiş durumu, CSS ":visited" özelliği ile seçilmiştir.
CSS "[attribute^=value]" Seçicisi:
Belirtilen özniteliğin belirtilen değerle başlayan tüm öğeleri seçer.
<a href='https://example.com'></a>a[href^="https"]{
color: green;
}Yukarıdaki örnekte "a" elementinin href özniteliği "https" ile başlayan durumu, CSS "[attribute^=value]" özelliği ile seçilmiştir.
CSS "[attribute$=value]" Seçicisi:
Belirtilen özniteliğin belirtilen değerle biten tüm öğeleri seçer.
<a href='document.pdf'></a>a[href$=".pdf"]{
color: brown;
}Yukarıdaki örnekte "a" elementinin href özniteliği ".pdf" ile biten durumu, CSS "[attribute$=value]" özelliği ile seçilmiştir.
CSS "[attribute*=value]" Seçicisi:
Belirtilen özniteliğin belirtilen değeri içeren tüm öğeleri seçer.
<a href='https://www.w3schools.com'></a>a[href*="w3schools"]{
color: teal;
}Yukarıdaki örnekte "a" elementinin href özniteliği "w3schools" kelimesini içeren durumu, CSS "[attribute*=value]" özelliği ile seçilmiştir.
CSS'te bulunan diğer seçim türlerini görüntülemek için CSS'te Seçim Yöntemleri isimli ana yazımıza bakmanızı tavsiye etmekteyiz.