CSS Nitelik Seçicisi

Etiketleri niteliğine göre seçme işlemi için bu seçicileri kullanıyoruz. Sırasıyla neler bir bakalım;

[nitelik] Seçicisi

Bu seçici, etikette nitelik olup olmadığına bakıyor. Olanları seçiyor. Örneğin title niteliği olan tüm etiketleri seçmek isteseydim;

[title] {
    color: red;
}

Ya da örneğin target niteliği olan a etiketlerini seçmek isteseydim;

a[target] {
    color: green;
}

[nitelik="değer"] Seçicisi

Bir önceki seçiciden farklı olarak, niteliğin değerine eşit etiketleri seçmek için kullanılır. Örneğin a etiketinde target niteliği _blank olanları seçmek istersek;

a[target="_blank"] {
    color: red;
}

[nitelik~="değer"] Seçicisi

Nitelik içinde belirtilen değer geçen etiketleri seçmek için kullanılır. Örneğin şöyle bir html olsun;

<div class="box box-lg">kutu 1</div>
<div class="box-lg box">kutu 2</div>
<div class="box-lg">kutu 3</div>

Ve class niteliğinde box geçen etiketleri seçmek için şöyle yazabiliriz;

[class~="box"] {
    background-color: yellow;
}

Sonuç;

Gördüğünüz gibi son etiketi seçmedi zira box değil box-lg ifadesi var.

[nitelik|="değer"] Seçicisi

Nitelik belirtilen değerle başlayan etiketleri seçer. Ancak burada önemli olan, belirtilen değerin tüm kelimeyle eşleşiyor olmasıdır. Ya tüm kelimeyle ya da tire işareti ile ayrılmış kelimenin başlangıcı ile eşleşiyor olması gerekir. Örneğin html yapımız şöyle olsun;

<div class="box-sm">kutu 1</div>
<div class="box-lg">kutu 2</div>
<div class="boxlg">kutu 3</div>

Ve box ile başlayan etiketleri seçecek olsaydık;

[class|="box"] {
    background-color: yellow;
}

Sonuç olarak en alttaki hariç diğerlerini seçmiş olacaktık. Çünkü en alttaki başlangıç olarak tüm kelimeyi baz aldığımızda box değil boxlg olduğu için. Ayrıca boşluk ile ayrılmış nitelik değerlerinde de bu seçici işe yaramaz. Yani başlangıçı seçtiğimiz değer bile olsa boşluk varsa o etiketi seçmeyecektir.

[nitelik^="değer"] Seçicisi

Yukarıdaki seçicinin aksine belirtilen değer ile başlayan tüm etiketleri seçmek için kullanılır. Boşluk tire işareti vs. hiçbirine bakmaz. Tek baktığı, niteliğin değeri belirlenen değerle başlıyor mu başlamıyor mu? Yine aynı yapıda bir html yapımız olsaydı;

<div class="box box-sm">kutu 1</div>
<div class="box-lg">kutu 2</div>
<div class="boxlg">kutu 3</div>

Ve şu şekilde seçme işlemi yapsaydık;

[class^="box"] {
    background-color: yellow;
}

Sonuç, hepsini seçecektir.

[nitelik$="değer"] Seçicisi

Bir üstteki seçicinin tam tersi olarak, niteliği belirtilen değerle biten tüm etiketleri seçmemizi sağlıyor. Örneğin html yapımız şöyle olsun;

<div class="box-lg box">kutu 1</div>
<div class="bbox">kutu 2</div>
<div class="lg-box">kutu 3</div>
<div class="kutu">kutu 4</div>

Şimdi class niteliği box ile biten etiketleri seçelim.

[class$="box"] {
    background-color: yellow;
}

Sonuç ise, son div hariç hepsini seçecektir.

[nitelik*="değer"] Seçicisi

Sonu ve başlangıcı belirlediğimiz değer ile bitenleri seçmeyi başardık. Bu seçici ile, niteliklerde belirlediğimiz değer geçen tüm etiketleri seçmek için kullanılıyor.

<div class="box">kutu 1</div>
<div class="tox">kutu 1</div>
<div class="hoxxx">kutu 1</div>

Şimdi class niteliği içerisinde ox değeri geçen etiketleri seçelim.

[class*="ox"] {
    background-color: yellow;
}

Gördüğünüz gibi ox değeri hepsinde geçtiği için tüm etiketleri seçtik.