CSS Öznitelik Seçiciler (Attribute Selectors)

CSS Öznitelik Seçiciler Nelerdir? Sorusunu bu konumuzda detaylı olarak ele alıyoruz.

CSS Öznitelik Seçiciler (Attribute Selectors)

CSS Öznitelik Seçiciler

[attribute] [Özellik] Seçici

[attribute] (özellik) seçici belirli bir özelliği olan unsurları seçmek için kullanılır.

Aşağıdaki örnek, bir hedef özelliğe sahip tüm <a> öğelerini seçer:

a[target] {
  background-color: yellow;
}

[attribute="value"] (özellik="değer") Seçici

[attribute="value"] (özellik="değer") seçici bir belirtilen özelliğin ve değer elemanları seçmek için kullanılır.

Aşağıdaki örnek, target= "_ blank" özelliğine sahip tüm <a> öğelerini seçer:

a[target="_blank"] {
  background-color: yellow;
}

[attribute~="value"] (özellik~="değer") Seçici

[attribute~="value"] (özellik~="değer") seçici belirli bir kelimeyi kapsayan bir özellik değerine sahip elemanları seçmek için kullanılır.

[title~="flower"] {
  border: 5px solid yellow;
}

[attribute|="value"] (özellik|="değer") Seçici

[attribute|="value"] (özellik|="değer") seçici belirtilen değer ile başlayarak belirtilen niteliğiyle elemanları seçmek için kullanılır.

Aşağıdaki örnek, "top" ile başlayan bir sınıf özniteliği değerine sahip tüm öğeleri seçer:

Not: Değerin, tek başına, class="top" gibi veya ardından class="top-text" gibi bir tire (-) gibi tam bir kelime olması gerekir! 

[class|="top"] {
  background: yellow;
}

[attribute^="value"] (özellik^="değer") Seçici

[attribute^="value"] (özellik^="değer") seçici olan özellik, değeri belirli bir değer ile başlayan seçme elemanları için kullanılır.

Aşağıdaki örnek, "top" ile başlayan bir sınıf özniteliği değerine sahip tüm öğeleri seçer:

Not: Değerin tam bir kelime olması gerekmez!  

[class^="top"] {
  background: yellow;
}

[attribute$="value"] (özellik$="değer") Seçici

[attribute$="value"] (özellik$="değer") seçici olan özellik değeri belirli bir değer alan uçlarıdaki  elemanları seçmek için kullanılır.

Aşağıdaki örnek, "test" ile biten bir class sınıf özniteliği değerine sahip tüm öğeleri seçer:

Not: Değerin tam bir kelime olması gerekmez!  

[class$="test"] {
  background: yellow;
}

[attribute*="value"] (özellik*="değer") Seçici

[attribute*="value"] (özellik*="değer") seçici olan özellik değeri belirli bir değeri içeren elemanları 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:

Not: Değerin tam bir kelime olması gerekmez!  

[class*="te"] {
  background: yellow;
}

Şekillendirme Formları

Öznitelik seçicileri, sınıfı veya kimliği olmayan formların stilini belirlemek için yararlı olabilir:

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

Seçici Örnek Örnek Açıklama
[attribute] [target] Hedef niteliği olan tüm öğeleri seçer.
[attribute=value] [target=_blank] target="_ blank" olan tüm öğeleri seçer.
[attribute~=value] [title~=çiçek] "Çiçek" kelimesini içeren bir başlık özelliğine sahip tüm öğeleri seçer.
[attribute|=value] [lang|=tr] "tr" ile başlayan lang özellik değerine sahip tüm öğeleri seçer.
[attribute^=value] a[href^="https"] href öznitelik değeri olan "https" ile başlayan her <a> öğesini seçer.
[attribute$=value] a[href$=".pdf"] href öznitelik değeri olan ".pdf" ile biten her <a> öğesini seçer.
[attribute*=value] a[href*="onurkul"] href öznitelik değeri olan "onurkul" alt dizesini içeren her <a> öğesini seçer.

Tepkiniz Nedir?

like

dislike

love

funny

angry

sad

wow