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

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

 

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim CSS Dersleri
Kategori Web Programlama
Ders Adeti 41 Ders
Dil Türkçe
Güncelleme 10/2021
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 41 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla