Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS Öznitelik Seçiciler konusunu öğreneceğiz.
CSS'de belirli parameterlere sahip HTML etiketlere stil vermek mümkündür ve Attribute Selectors (Öznitelik Seçiciler) sayesinde stil verebiliriz.
CSS [attribute] Seçici
[attribute] seçicisi, belirli bir özniteliğe sahip öğeleri seçmek için kullanılır.
Aşağıdaki örnek, bir target parametresine sahip olan tüm a etiketlerini seçer:
a[target] {
background-color: yellow;
}
CSS [attribute="value"] Seçici
[attribute="value"] seçicisi, belirtilen nitelik ve değere sahip öğeleri seçmek için kullanılır.
Aşağıdaki örnek, target="_blank" parametresine sahip tüm a etiketlerini seçer:
a[target="_blank"] {
background-color: yellow;
}
CSS [attribute~="value"] Seçici
[attribute~="value"] seçicisi, belirtilen bir kelimeyi içeren öznitelik değerine sahip etiketleri seçmek için kullanılır.
Aşağıdaki örnek, bir title parametre değeri "flower" içeren, tüm etiketleri seçer.
[title~="flower"] {
border: 5px solid yellow;
}
CSS [attribute|="value"] Seçici
[attribute|="value"] seçicisi, belirtilen değerden başlayarak belirtilen özniteliğe sahip etiketleri seçmek için kullanılır.
Aşağıdaki örnek, "top" ile başlayan bir sınıf öznitelik değerine sahip tüm öğeleri seçer:
[class|="top"] {
background: yellow;
}
CSS [attribute^="value"] Seçici
[attribute^="value"] seçicisi, öznitelik değeri belirli bir değerle başlayan etiktetleri seçmek için kullanılır.
Aşağıdaki örnek, "top" ile başlayan bir sınıf öznitelik değerine sahip tüm öğeleri seçer:
[class^="top"] {
background: yellow;
}
CSS [attribute$="value"] Seçici
[attribute$="value"] seçicisi, öznitelik değeri belirli bir değerle biten öğeleri seçmek için kullanılır.
Aşağıdaki örnek, "test" ile biten bir sınıf öznitelik değerine sahip tüm öğeleri seçer:
[class$="test"] {
background: yellow;
}
CSS [attribute*="value"] Seçici
[attribute*="value"] seçicisi, öznitelik değeri belirli bir değer içeren öğeleri seçmek için kullanılır.
Aşağıdaki örnek, "te" içeren bir sınıf öznitelik değerine sahip tüm öğeleri seçer:
[class*="te"] {
background: yellow;
}
