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;
}