CSS Öznitelik Seçicileri ( Attribute Selectors)

CSS öznitelik seçicileri, belirli bir nitelik veya nitelik değerinin varlığına dayanarak stilleri HTML öğelerine uygulamak için kolay ve güçlü bir yol sağlar.

CSS, özelliklerinden herhangi birini kullanarak HTML öğeleri ile iletişim kurabilir. Muhtemelen "class" ve "id" seçicileri biliyorsunuz. Bu özellikleri HTML'de bir elementte kontrol edelim.

<h2 id="baslık" class="metin"  title="text">CSS Öznitellik Seçiciler</h2>

h2 etiketinin üç özelliği vardır: id, class ve title CSS'de bir öğe seçmek için id(# baslık) seçici ve sınıf (.metin) seçicisini kullanabilirsiniz; Ancak bu etiketi seçmek için title özniteliğini kullanabileceğinizi biliyor muydunuz? Bu, özellik öznitellik seçici olarak adlandırılır.

h2[title=text] {

  /* özellikler */
  
}

Nitelikler nelerdir?

Tüm HTML öğeleri, öznitelikler olarak adlandırılan özelliklere sahip olabilir. Bu niteliklerin genellikle değerleri vardır. Boşluklarla ayrılmış oldukları sürece, bir öğenin etiketinde herhangi sayıda öznitelik / değer çifti kullanılabilir. Bu özellikler html etiketlerinde herhangi bir sırada görünebilir.

Aşağıdaki örnekte mavi renkle vurgulanan kod parçaları niteliklerdir (özellik) ve kırmızı renkle vurgulanan bölümler değerler adı verilir.

Özellik seçiciler

Öznitelik seçicileri, öğelerin özelliklerine veya özellik değerlerine göre seçmek için kullanılır. Örneğin, "manzara.jpg" adlı bir HTML sayfasındaki herhangi bir resmi seçmek isteyebilirsiniz. Bu, yalnızca seçilen ada sahip resimleri hedefleyecek olan aşağıdaki kuralla yapılabilir:

img[src="manzara.jpg"] { border: 1px solid #000; }

Yedi özellik seçici türü vardır.

Not: CSS öznitelik seçicilerinin tümü için, seçiciyi köşeli parentez [ ] ile kapatmak zorunludur.

CSS [öznitelik] seciçi -- [attribute] Selector

İlk seçenek, özniteliğe dayalı olarak seçmektir. [attribute] Seçici belirli bir özelliği olan unsurları seçmek için kullanılır. Aşağıdaki örnek, bir hedef özniteliği olan tüm <a> öğelerini seçer.

a[target] {

         background-color: yellow;
  
        }

"title" özelliği olan tüm "h1" etiketleri, "alt" özelliği olan tüm resimleri seçin.

h1[title] { border: 1px solid #000; }

img[alt] { border: 1px solid #000; }

Değere göre seçmek

Bir etiketin özellik değerine göre tanımlama yapmamızı sağlar.

CSS sözdizimi [attribute = "value"] öznitelik seçici

[nitelik="değer"] seçici, özellik değeri tam olarak verilen değere eşit olan herhangi bir öğeyi seçer.

Aşağıdaki örnek, tüm <a> öğelerini target = "_ blank" niteliği ve değeri ile seçer.

a[target="_blank"] { 

        background-color: yellow;
  
       }

CSS [attribute~="value"]

Burada, seçili öğenin özellik değerinin boşluklarla ayrılmış bir sözcük listesi olduğu ve sözcüklerden birinin değerine eşit olması seçmek için yeter.

Aşağıdaki örnek, biri "ders" olan boşluklarla ayrılmış kelimelerin bir listesini içeren bir başlık özniteliğine sahip tüm resim öğeleri seçer.

img[alt~=ders] {

        border: 1px solid red;
    
    }

HTML :

<img src="php.jpg" alt="php ders">

<img src="css.jpg" alt="ders css">

<img src="html.png" alt="html"><!--seçmez-->

<img src="jquery.jpg" alt=" çok iyi jquery ders">

CSS [attribute|="value"]

[Attribute | = "value"] Seçici, özelliği belirtilen değer ile başlayan öğeleri seçmek için kullanılır. Burada değer ifadesi tire(-) işareti ile ayrılmış şekilde tek bir kelime olmalıdır.

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

div[class|=yeşil]{
        background-color: green;
      }

HTML :

<div class="yeşil-masa"></div>

<div class="yeşil-sandalye"></div>

<div class="yeşil koltuk"></div>

<div class="sıra-yeşil"></div>

Yukarda "yeşil koltuk" (arada boşluk var)ve sıra-yeşil (Belirtilen değerle başlamıyor) haricinde hepsini seçer.

CSS [attribute^="value"]

1. Öznitelik değerinin tam dize (kelime) ile başladığı öğelere CSS stilleri uygulamak için bu Seçici'yi kullanın.

2. Burada "^" sembolü "Başlar" anlamına gelir .

3. Örneğin: a [href ^ = "http: //"] , http: // ile başlayan tüm harici bağlantıları hedeflemek için kullanılabilir . Fakat https: // şemasını kullanarak bağlantıları hedeflemeyecektir .

Not: Bu değer bir kelimeyle aynı olmak zorunda değildir!

a[href^="http://"] /* [http://]  ile başlayan değer*/

{color:#fa4b2a;

font-family:Verdana, Arial;}

CSS [attribute$="value"]

1. Seçici'de kullanılan tam dize ile öznitelik değerinin bittiği öğelere CSS stilleri uygulamak için bu Seçici'yi kullanın .

2. Bu, yalnızca bir nitelik değeri dize ile biterse, stilleri bir öğeye uygulayacaktır.

3. Örneğin: a [href $ = ". Php"] , .php ile biten tüm öğeleri elemanları seçecektir .

Not: Bu değer bir kelimeyle aynı olmak zorunda değildir!

a[href$=".php"] /*"href"  özniteliği .php ile biten "a" etiketini seçer*/

{

font-family:Verdana;

color:#ccc;

}

CSS [attribute*="value"]

1. Bu Seçici'yi, öznitelikte belirli bir alt dizeyi içeriyorsa CSS stillerini uygulamak için kullanın (diğer bir deyişle tam sözcükler veya sözcük parçaları)

2. Değer, özellik içinde herhangi bir yerde bulursa, stilleri bu öğeye uygular.

Not : Bu değer bir kelimeyle aynı olmak zorunda değildir!

Aşağıdaki örnek "te" harfleri içeren sınıf nitelik değerine sahip tüm öğeleri seçer:

[class*="te"] {

    background: yellow;
  
}

Öznitelik seçicilerinin birleştirilmesi

Öznitelik seçicilerin öğelerini, sınıflar veya (id) kimlik gibi diğer seçicilerle birleştirebilirsiniz.

.kutu [class$=menu]{
        background-color: green;
    }
  
#menu [class^=ilk]{
        background-color: green;
    }
     

Tüm CSS Öznitelik Seçicileri