Nitelik seçiciler

HTML eğitimi çalışmalarından hatırladığın gibi, kullanılan öğenin, öğe hakkında daha ayrıntılı bilgi veren niteliklere sahip olabilir. CSS'de, belirli niteklilere sahip öğeleri hedeflemek için nitelik seçicileri kullanabilirsin. Bu ders, bu çok kullanışlı seçicileri nasıl kullanacağını gösterecek.

Ön koşullar: Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesidosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç: Nitelik seçicilerin ne olduğunu ve nasıl kullanılacağını öğrenmek.

Durum ve değer seçiciler

Bu seçiciler, tek başına bir niteliğin varlığına (örneğin href) veya niteliğin değerine karşı çeşitli eşleşmelere dayalı olarak bir öğenin seçilmesini sağlar.

Seçici Örnek Açıklama
[nitelik] a[title] Belirtilen niteliğe sahip öğeleri eşleştirir(adı köşeli parantez içindeki değerdir)
[nitelik=değer] a[href="https://example.com"] Nitelik değerinin tırnak içerisindeki değerle tam olarak eşleşenleri seçer.
[nitelik~=değer] p[class~="special"]


Nitelik değeri tırnak içerisindeki değerle tam olarak eşleşen veya diğerlerinden boşlukla ayrılmış olan eşleşmeleri seçer.

[nitelik|=değer] div[lang|="zh"] Nitelik değeri tırnak içerisindeki değerle tam olarak eşleşen veya eşleşen değerle başlamış olması kaidesiyle hemen ardından tire(-) işaretiyle ayrılmış değerleri seçer.

Aşağıdaki örnekte bu seçicilerin kullanıldığını görebilirsin.

  • li[class]: kullanarak bir seçiciyi herhangi bir sınıf niteliğine sahip öğeyle eşleştirebiliriz.
  • li[class="a"]: a sınıfına sahip bir öğeyle eşleşir. ancak öğe a sınıfından başka bir sınıfa da dahil edilmiş ise bu öğeyle eşleşmez.
  • li[class~="a"]a sınıfıyla tam olarak eşleşen ve boşlukla diğer sınıflardan ayrılarak tanımlanmış öğeleride seçer.
  • li[lang|="zh"zh ile tam eşleşen veya zh- ile başlayan nitelik değerlerine sahip öğeleri seçer.

Alt dize eşleştirme seçicileri

Bu seçiciler, niteliğin değeri içindeki dizelerde daha gelişmiş eşlemelere olanak tanır. Örneğin,  box-warning ve box-error sınıfların olsun ve siz box- dizesiyle başlayan her şeyi hedeflemek istiyorsan,  [class^="box-"] ile ikisini birde seçebilirsin. (veya [class|="box"] yukarıdaki bölümde açıklandığı gibi).

Seçici Örnek Açıklama
[nitelik^=value] li[class^="box-"] nitelik değeri, çift tırnak içerisindeki dize ile başlıyorsa eşleştirmeyi sağlar.
[nitelik$=value] li[class$="-box"] nitelik değeri, çift tırnak içerisindeki dize ile bitiyorsa eşleştirmeyi sağlar.
[nitelik*=value] li[class*="box"] nitelik değerinin herhangi bir yerinde çift tırnak içerisindeki dize bulunuyorsa eşleştirme sağlar.

(Dipnot: Düzenli ifadelerde kullanımları çok yaygındır ^ ile başlayanlar ve $ ile bitenler.)

Bir sonraki örnek, bu seçicilerin kullanımını göstermektedit:

  • li[class^="a"]: a ile başlayan herhangi bir nitelik değeriyle eşleşir. Bu nedenle ilk iki liste öğesiyle eşleşir.
  • li[class$="a"]: a ile biten herhangi bir nitelik değeriyle eşleşir. Bu nedenle birinci ve üçüncü liste öğesiyle eşleşir.
  • li[class*="a"]: Herhangi bir nitelik değerinin, herhangi bir yerinde a dizesi geçiyorsa eşleşir. Bu yüzden tüm liste öğelerimizle eşleşir.

Büyük küçük harf duyarlılığı

Esasen CSS büyük/küçük harfe duyarlı değildir. Fakat HTML belge dilinin gereksinimlerinden dolayı ASCII karakter aralığında büyük/küçük harfe duyarlı olacaktır. Eğer kurallarının büyük/küçük harfe duyarlı olmasını istemiyorsan i bildirimini köşeli parantezi kapatmadan önce bildirmen gerekmektedir. CSS'in büyük/küçük harfe duyarlılığı hedeflediği belge diline göre belirlenecektir.

Aşağıdaki örnekte, ilk seçici, a ile başlayan bir değerle eşleşecektir — yalnızca ilk liste öğesiyle eşleşir çünkü diğer iki liste öğesi büyük A harfiyle başlar. ikinci seçici, büyük/küçük harf duyarlı bağrağını kullanır ve bu nedenle tümüyle eşleşir.

Not: Belge dilinin büyük/küçük harfe duyarlı olmadığı durumlarda, büyük/küçük harfe duyarlı eşlemeyi zoralayacak yeni bir değer daha vardır(s). Ancak bu, tarayıclarda daha az desteklenir ve HTML gereksinimlerinden dolayı kullanışlı değildir.

Sonraki adımlar

Artık nitelik seçicilerle işimiz bitti, bir sonraki dersimize devam edebiliriz ve  sözde sınıf ve sözde öğe seçiciler hakkında bilgi edinebilirsin.

Bu kısımda