HTML çalışmanızdan bildiğiniz gibi, öğeler kendileri hakkında daha fazla ayrıntı veren niteliklere sahip olabilirler. CSS’de, belirli niteliklere sahip öğeleri hedeflemek için nitelik seçicileri kullanabilirsiniz. Bu yazı, size, bu çok kullanışlı seçicileri nasıl kullanacağınızı gösterecektir.
Varlık ve değer seçiciler
Bu seçiciler, tek başlarına bir özniteliğin varlığına (örneğin href) veya özniteliğin değerine göre çeşitli farklı eşleşmelere dayalı olarak bir öğenin seçilmesini sağlarlar.
| seçici | Örnek | Açıklama |
|---|---|---|
[attr] | a[title] | Bir attr özniteliğine sahip öğeleri eşleştirir (adı köşeli parantez içindeki değerdir). |
[attr=value] | a[href="example.com"] | Değeri tam olarak value olan bir attr özniteliğine sahip öğeleri eşleştirir – tırnak işaretleri içindeki dize. |
[attr~=value] | p[class~="special"] | Değeri tam olarak value olan veya (boşlukla ayrılmış) değerler listesinde value içeren bir attr özniteliğine sahip öğeleri eşleştirir. |
[attr|=value] | div[lang|="zh"] | Değeri tam olarak value olan veya hemen ardından bir tire gelen value ile başlayan bir attr özniteliğine sahip öğeleri eşleştirir. |
Aşağıdaki örnekte bu seçicilerin kullanıldığını görebilirsiniz.
li[class]kullanarak herhangi bir liste öğesini bir sınıf özelliğiyle eşleştirebiliriz. Bu, ilki hariç tüm liste öğeleriyle eşleşir.li[class="a"]ileasınıfına sahip bir seçici oluştururuz, ancak buasınıfının, değerin bir parçası olarak boşlukla ayrılmış başka bir sınıfa sahip olmadığı durumdalar için geçerlidir. İkinci liste öğesini seçer.li[class~="a"]aiçeren bir sınıfla eşleşir,aancak aynı zamanda boşlukla ayrılmış bir listenin parçası olan bir değerle de eşleşir. İkinci ve üçüncü liste öğelerini seçer.
li[class] {
font-size: 200%;
}
li[class="a"] {
background-color: yellow;
}
li[class~="a"] {
color: red;
}<h1>Attribute presence and value selectors</h1>
<ul>
<li>Item 1</li>
<li class="a">Item 2</li>
<li class="a b">Item 3</li>
<li class="ab">Item 4</li>
</ul>
Alt dize eşleştirme seçicileri
Bu seçiciler, özniteliğinizin değeri içindeki alt dizelerin daha gelişmiş eşleştirilmesine izin verir. Örneğin, box-warning ve box-error sınıflarınız varsa ve "box-" dizesiyle başlayan her şeyi eşleştirmek istiyorsanız, [class^="box-"] (veya [class|="box"] yukarıdaki bölümde açıklandığı gibi) seçicisini ikisini de seçmek için kullanabilirsiniz .
| seçici | Örnek | Açıklama |
|---|---|---|
[attr^=value] | li[class^="box-"] | value değeri ile başlayan bir özniteliğe sahip elemanları eşleştirir. |
[attr$=value] | li[class$="-box"] | value değeri ile biten bir özniteliğe sahip elemanları eşleştirir. |
[attr*=value] | li[class*="box"] | value değerini özniteliğin herhangi bir yerinde içeren elemanları eşleştirir. |
(Not: ^ ve $ işaretlerinin programlamada düzenli ifadeler olarak kullanıldığını bilmek yardımcı olabilir. ^ ile başlar anlamına gelir ve $ ile biter anlamındadır.)
Sonraki örnek, bu seçicilerin kullanımını gösterir:
li[class^="a"],aile başlayan herhangi bir öznitelik değeriyle eşleşir, bu nedenle ilk iki liste öğesiyle eşleşir.li[class$="a"],aile biten herhangi bir öznitelik değeriyle eşleşir, bu nedenle birinci ve üçüncü liste öğesiyle eşleşir.li[class*="a"], dizenin herhangi bir yerindeagörünen herhangi bir öznitelik değeriyle eşleşir, bu nedenle tüm liste öğelerimizle eşleşir.
li[class^="a"] {
font-size: 200%;
}
li[class$="a"] {
background-color: yellow;
}
li[class*="a"] {
color: red;
}<h1>Attribute substring matching selectors</h1>
<ul>
<li class="a">Item 1</li>
<li class="ab">Item 2</li>
<li class="bca">Item 3</li>
<li class="bcabc">Item 4</li>
</ul>
Büyük küçük harf duyarlılığı
Öznitelik değerlerini büyük/küçük harfe duyarlı olmadan eşleştirmek istiyorsanız kapanış parantezinden önce i değerini kullanabilirsiniz. Bu ifade, tarayıcıya ASCII karakterlerini büyük/küçük harfe duyarlı olmadan eşleştirmesini söyler. Bu ifade olmadan değerler, belge dilinin büyük/küçük harf duyarlılığına göre eşleştirilecektir – HTML durumunda büyük/küçük harf duyarlı olacaktır.
Aşağıdaki örnekte, ilk seçici, a ile başlayan bir değerle eşleşir — diğer iki liste öğesi büyük harf A ile başladığından yalnızca ilk liste öğesiyle eşleşir. İkinci seçici, büyük/küçük harfe duyarlı olmayan ifadeyi kullanır ve bu nedenle, tüm liste öğesiyle eşleşir.
li[class^="a"] {
background-color: yellow;
}
li[class^="a" i] {
color: red;
}<h1>Case-insensitivity</h1>
<ul>
<li class="a">Item 1</li>
<li class="A">Item 2</li>
<li class="Ab">Item 3</li>
</ul>
Not: Eşleştirmenin normalde büyük/küçük harfe duyarlı olmadığı bağlamlarda büyük/küçük harf duyarlı eşleştirmeyi zorlayacak daha yeni bir s ifadesi de bulunuyor. Ancak bu ifade tarayıcılarda daha az desteklenir ve HTML bağlamında pek kullanışlı değildir.
Sonraki adımlar
Artık öznitelik seçicilerle işimiz bittiğine göre, bir sonraki makaleye geçebilir ve sözde sınıf ve sözde öğe seçiciler hakkında bilgi edinebilirsiniz.