CSS Öznitelik Seçiciler (Attribute Selectors)
CSS Öznitelik Seçiciler Nelerdir? Sorusunu bu konumuzda detaylı olarak ele alıyoruz.
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?