Nitelik seçiciler

HTML çalışmanızda bildiğiniz gibi, elemanlar, işaretlenen öğe hakkında daha fazla ayrıntı veren niteliklere sahip olabilir. CSS'de, belirli niteklilere sahip öğeleri hedeflemek için nitelik seçicileri kullanabilirsiniz. Bu ders size bu çok kullanışlı seçicileri nasıl kullanacağınızı 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 özniteliğin varlığına (örneğin href) veya özniteliğin değerine karşı çeşitli eşleşmelere dayalı olarak bir elemanın seçilmesini sağlar.

Seçici Örnek Açıklama
[attr] a[title] attr niteliğine sahip elemanları eşleştirir(adı köşeli parantez içindeki değerdir)
[attr=value] a[href="https://example.com"] Nitelik değeri tırnak içerisindeki değerle tam olarak eşleşenleri seçer.
[attr~=value] 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.

[attr|=value] 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örebilirsiniz.

  • li[class]: kullanarak bir seçiciyi herhangi bir sınıf niteliğine sahip elemanla eşleştirebiliriz.
  • li[class="a"]: a sınıfına sahip bir seçiciyle eşleşir. ancak eleman a sınıfından başka bir sınıfa da dahil edilmiş ise bu elemanla eşleşmez. İkinci liste elemanı seçilir.
  • li[class~="a"]a sınıfyla tam olarak eşleşen ve boşlukla diğer sınıflardan ayrılmış bir şekilde uygulanan, elemanları seçer.

Alt dize eşleştirme seçicileri

Bu seçiciler, özelliğinizin değeri içnde alt dizelerin daha gelişmiş eşleşmesine olanak tanır. Örneğin,  box-warning ve box-error sınıflarınız olsun ve siz box- dizesiyle başlayan her şeyi hedeflemek istiyorsunuz.  [class^="box-"] ile ikisini birde seçebilirsiniz. (veya [class|="box"] yukarıdaki bölümde açıklandığı gibi).

Seçici Örnek Açıklama
[attr^=value] li[class^="box-"] attr nitelik değeri, çift tırnak içerisindeki dize ile başlıyorsa eşleştirmeyi sağlar.
[attr$=value] li[class$="-box"] attr nitelik değeri, çift tırnak içerisindeki dize ile bitiyorsa eşleştirmeyi sağlar.
[attr*=value] li[class*="box"] attr 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şlar ve $ ile biter.)

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 elemanıyla eşleşir.
  • li[class$="a"]: a ile biten herhangi bir nitelik değeriyle eşleşir. Bu nedenle birinci ve üçüncü liste elemanıyla 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 — HTML'nin gereksinimlerinden dolayı büyük/küçük harfe duyarlı olcaktır. Nitelik değerlerinin büyük/küçük harfe duyarlılığını kaldırmak istiyorsanız kapanış köşeli parantezden önce i değerini kullanabilirsiniz. Bu bayrak, tarayıcıya ASCII karakterlerini büyük/küçük harfe duyarlılığı kaldırarak eşleştirmesini söyler. İşaret olmadan değerler belge dilinin büyük/küçük harf duyarlılığına göre eşleşecektir.

Aşağıdaki örnekte, ilk seçici, a ile başlayan bir değerle eşleşecektir — yalnızca ilk liste elemanıyla eşleşir çünkü diğer iki liste elemanı 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: Eşleşmenin 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 durumunda çok 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 eleman seçiciler hakkında bilgi edinebilirsiniz.

Bu kısımda

  1. Kaynak sırası ve miras
  2. CSS seçicileri
  3. Kutu modeli
  4. Arka planlar ve kenarlıklar
  5. Farklı metin yönleri kullanma
  6. Taşan içerik
  7. Değerler ve birimler
  8. CSS'de elemanların boyutları
  9. Görseller, medya ve form öğeleri
  10. Tabloları şekillendirme
  11. CSS'de hata ayıklama
  12. CSS'inizi düzenleme