CSS Özellik Seçicileri
Belirli Niteliklere Sahip Stil HTML Öğeleri
Belirli niteliklere veya nitelik değerlerine sahip HTML öğelerine stil vermek mümkündür.
CSS [özellik] Seçici
Seçici [attribute], belirli bir özniteliğe sahip öğeleri seçmek için kullanılır.
Aşağıdaki örnek, bir hedef özniteliği olan tüm <a> öğelerini seçer:
Örnek
a[target] {
background-color: yellow;
}
CSS [attribute="value"] Seçici
Seçici [attribute="value"], belirli bir nitelik ve değere sahip öğeleri seçmek için kullanılır.
Aşağıdaki örnek, target="_blank" özniteliğine sahip tüm <a> öğelerini seçer:
Örnek
a[target="_blank"] {
background-color: yellow;
}
CSS [attribute~="değer"] Seçici
Seçici [attribute~="value"], belirli bir kelimeyi içeren öznitelik değerine sahip öğeleri seçmek için kullanılır.
Aşağıdaki örnek, bir tanesi "çiçek" olan, boşlukla ayrılmış bir sözcük listesi içeren başlık özniteliğine sahip tüm öğeleri seçer:
Örnek
[title~="flower"] {
border: 5px solid yellow;
}
Yukarıdaki örnek, title="flower", title="summer flower" ve title="flower new" öğeleriyle eşleşir, ancak title="my-flower" veya title="flowers" ile eşleşmez.
CSS [attribute|="value"] Seçici
Seçici [attribute|="value"], değeri tam olarak belirtilen değer veya bir tire (-) ile takip edilen belirtilen değer olabilen belirtilen özniteliğe sahip öğeleri seçmek için kullanılır.
Not: Değer, tek başına class="top" gibi bir tam kelime veya ardından class="top-text" gibi bir tire( - ) olmalıdır.
Örnek
[class|="top"] {
background: yellow;
}
CSS [öznitelik^="değer"] Seçici
Seçici [attribute^="value"], değeri belirtilen değerle başlayan, belirtilen özniteliğe sahip öğeleri 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:
Not: Değerin tam bir kelime olması gerekmez!
Örnek
[class^="top"] {
background: yellow;
}
CSS [attribute$="değer"] Seçici
Seçici [attribute$="value"], ö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:
Not: Değerin tam bir kelime olması gerekmez!
Örnek
[class$="test"] {
background: yellow;
}
CSS [attribute*="value"] Seçici
Seçici [attribute*="value"], ö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:
Not: Değerin tam bir kelime olması gerekmez!
Örnek
[class*="te"] {
background: yellow;
}
Şekillendirme Formları
Nitelik seçiciler, sınıf veya kimlik içermeyen formları biçimlendirmek için yararlı olabilir:
Örnek
input[type="text"]
{
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"]
{
width: 120px;
margin-left: 35px;
display: block;
}
İpucu: Formların CSS ile nasıl şekillendirileceğine ilişkin daha fazla örnek için CSS Formları Eğitimimizi ziyaret edin .
Tüm CSS Özellik Seçicileri
| Selector | Example | Example description |
|---|---|---|
| [attribute] | [target] | Selects all elements with a target attribute |
| [attribute=value] | [target=_blank] | Selects all elements with target="_blank" |
| [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word "flower" |
| [attribute|=value] | [lang|=en] | Selects all elements with a lang attribute value starting with "en" |
| [attribute^=value] | a[href^="https"] | Selects every <a> element whose href attribute value begins with "https" |
| [attribute$=value] | a[href$=".pdf"] | Selects every <a> element whose href attribute value ends with ".pdf" |
| [attribute*=value] | a[href*="w3schools"] | Selects every <a> element whose href attribute value contains the substring "w3schools" |