Css Attribute Selector - Css Dersleri

[VexraDev]

Attribute Selector' larını etiketlerde belirtilen attribute özelliğine göre kullanıyoruz.

Örneğin ;

<img src="resim.jpg" alt="doğa resimleri">

img etiketi için src ve alt özelliği bir attribute özelliğidir ve bu img etiketine ulaşabilmek için bu attribute özelliklerini kullanabiliriz.


Eğer sayfadaki alt attribute olan tüm img etiketlerine ulaşmak istersek ;


1-) Attribute ismine göre;


** alt attribute özelliğine sahip olan tüm img etiketleri seçilir.

img[alt] {

}

2-) Attribute özelliğine atanan değere göre ;

** alt attribute özelliğine "doğa resimleri" atanmış tüm img etiketleri seçilir.

img[alt="doğa resimleri"] {

}

3-) Attribute özelliğine atanan değere göre ancak bu değer içinde geçen belli bir kelime aranır.


** alt attribute özelliği içinde doğa kelimesi geçen tüm img etiketleri seçilir.

img[alt~="doğa"] {

}

4-) Attribute özelliğine atanan değere göre ancak bu değer içinde geçen belli bir kelimenin en başta olması aranır.


** alt attribute özelliği doğa kelimesi ile başlayan tüm img etiketleri seçilir.

img[alt^="doğa"] {

}

5-) Attribute özelliğine atanan değere göre ancak bu değer içinde geçen belli bir kelimenin en sonda olması aranır.


** alt attribute özelliği doğa kelimesi ile biten tüm img etiketleri seçilir.

img[alt$="doğa"] {

}