CSS Atrribute seçiciler belirli bir niteliğe sahip ya da belirli bir nitelik değerine sahip olan HTML öğelerini seçmek için kullanılır.
attribute seçiciler ile bu HTML öğeleri seçilerek stillendirilebilir.
HTML ve CSS ile profesyonel web tasarım projeleri kodlarken CSS attribute seçicileri kullanmanızı gerektiren çok özel durumlarla karşılaşabilirsiniz. Ekstra class ve ID eklemenize gerek kalmadan istediğiniz öğeyi CSS attribute seçici ile seçerek stillendirebilrsiniz.
CSS Atrribute Seçici Örenkleri
| Seçici | Örnek | Açıklama |
|---|---|---|
| [attribute] | a[target] | target="" özelliği olan tüm a öğlerini seçer |
| [attribute=value] | a[lang=tr] | lang="tr" özelliği özel olan tüm a öğelerini seçer. |
| [attribute^=value] | a[href^="http"] | href özelliği http ile başlayan tüm a öğelerini seçer. |
| [attribute~=value] | a[class~="test"] | class özelliği test clasname içeren tüm a öğelerini seçer. |
| [attribute$=value] | a[class$="test"] | class özelliği test clasname ile sonlanan tüm a öğelerini seçer. |
| [attribute*=value] | a[class*="link"] | class özelliği "link" içeren tüm a öğelerini seçer. örnek <a href="#" class="link1"></a> |
Örnek Atribute Seçici CSS
Örnek HTML Kodu
<a href="https://www.tercihyazilim.com" target="_self" class="link1">Link1</a><br> <br>
<a href="http://www.tercihyazilim.com" target="_blank" class="link2">Link 2</a>
Örnek CSS Kodu
/*Link1 classname içeren linkleri seçer */
a[class~="link1"]{
border:2px solid red;
display:inline-block;
padding:10px;
color:red;
}
/* target="_blank" özelliği olan tüm linkleri seçer */
a[target="_blank"]{
border:2px solid blue;
display:inline-block;
padding:10px 30px;
color:blue;
}