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.

CSS Öznitellik Seçiciler

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.


css attribute selector

Ö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




Birimler İsimler Açıklamalar
E [attribute] Nitelik Belirtilen nitelik varsa öğeleri seçer
E [attribute= "value"] Kesin değer Eleman, tam değere eşit nitelikte belirtilmişse öğeleri seçer.
E [attribute~= "value"] Aralık liste Eleman, boşlukla ayrılmış listede tam değere eşit nitelikte belirtilmişse öğeleri seçer.
E [attribute*= "value"] İçeren Eleman herhangi bir yerde görünen tam değere eşit bir değer belirtmişse öğeleri seçer.
E [attribute^= "value"] İle başlar Eleman, yalnızca dizenin Başlangıçında tam değere eşit nitelikte bir nitelik belirtmişse öğeleri seçer.
E [attribute|= "value"] Tire liste Eleman, tire ile ayrılmış liste içindeki tam değere eşit nitelik belirtebiliyorsa öğeleri seçer.
E [attribute$= "value"] İle biter Eleman dizgenin sonundaki tam değere eşit nitelik atayan ise, öğeleri seçer.


Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

7224

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.