CSS Dersleri 32 - Attribute Selector (Öznitelik Seçiciler)

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