CSS — Attribute Selector Nedir ? Türleri Nelerdir ?

Merhaba arkadaşlar. Bugün sizlere bir HTML elemanına ait özellikleri CSS tarafında kullanarak stillendirme işlemlerini nasıl gerçekleştirebileceğimizi göstermek istiyorum. Kısaca bazı terimlerden bahsettikten sonra örnekler ile daha net anlaşılmasını sağlayalım :)

HTML Özellikleri Nelerdir ?

Özellik dediğimiz kelime İngilizcede olarak geçmektedir.

attribute : /ˈatrɪbjuːt/

a quality or feature regarded as a characteristic or inherent part of someone or something.

HTML tarafında kullandığımız elemanların kendilerine ait özellikleri yani attribute’leri bulunmaktadır. Bu özellikleri HTML elemanının başlangıç tag’ınıda kullanırız.

https://en.wikipedia.org/wiki/HTML_element

Örneğin;

  • tag’ını kullanarak bir görsel göstermek istediğimizde, görselin yolunu belirtmek için özelliğinden yararlanıyor oluruz.
  • tag’ını kullanarak bir url paylaşmak istediğimizde bunu, elemanına ait özelliğini kullanarak sağlıyor oluruz.

Vermiş olduğum örneklerdeki elemanları veya bunların dışındaki elemanları stillendirebilmek için kullanabileceğiniz pek çok yol bulunmaktadır. Dilerseniz bir elemana verdiğiniz class’ı kullanarak veya elemanın id’sini kullanarak veya direkt olarak HTML elemanının kendisini kullanarak stillendirme işlemlerini gerçekleştirebilirsiniz.

Bunlar aslında en bildiğimiz yöntemler diyebiliriz. Bunların yanında HTML elemanınıza ait olan bazı özellikleri veya bu özelliklerin sahip oldukları değerleri kullanarakta stillendirme işlemlerini gerçekleştirebiliriz. Bunun için CSS tarafında Attribute Selector tekniğinden yararlanabiliriz.

Attribute Selectors Nedir?

selector : /sɪˈlɛktə/

a person or thing that selects something.

  • Selector’ın Seçici / Ayırıcı olarak Türkçe karşılığı bulunmaktadır. Türkçeye çevirecek olursak eğer gibi bir karşılığı olduğunu söyleyebiliriz. Yani CSS tarafında bir HTML elemanına ait bir özelliği seçerek, o elemanı stillendirme işlemini gerçekleştirebiliriz. İyi toparlayabildim mi ? Devam edelim 😅
  • Bir önceki paragraftada belirttiğim gibi, Attribute Selectors, bize bir HTML elemanın sahip olduğu attribute’leri veya o attribute’lerin sahip oldukları değerleri kullanarak stillendirme işlemlerinin gerçekleştirilmesinde yardımcı olurlar.
  • CSS tarafında köşeli parantezler kullanarak yazarız.

Hadi başlayalım!

1 — Direkt Değer Eşleşmesi [attr=value]

Bir HTML elemanının sahip olmuş olduğu bir özelliğin değerini kontrol ederek eşleşen değere sahip olan elemanı stillendirme işlemini gerçekleştirebiliriz. Örnek olarak;

  • 4 tane sosyal medya platform link’i ekleyelim.
  • Bu sosyal medya platformlarından href özelliğine verdiğimiz link değeri olan html elemanının rengini değiştirelim. CSS tarafında kullanacağımız kod 👇

Gördüğünüz gibi CSS tarafında yazmış olduğumuz Özellik Seçicisi ile sadece href değeri eşleşen elemanının rengini değiştirmiş olduk. Şimdi diğer Attribute Selector’lere yani Türkçe karşılığı (Çok sevmesemde) Özellik Seçicilere bakmaya devam edelim.

2 — İçerisinde Spesifik Bir Değer İçeren [attr*=value]

Şimdi de her bir sosya medya platformunun kendi ikonlarını ekleyelim. Bunun için CSS tarafında href özelliğinin içerisinde bulunan değere göre ikon ekleme işlemini gerçekleştirebiliriz. Örnek olarak;

  • Eklenen link içerisinde medium geçiyorsa Medium ikonu, içerisinde GitHub geçiyorsa GitHub ikonunu ekleme gibi bir işlem gerçekleştirebiliriz. İkonlar için kullanabiliriz.
  • Burada * karakterini kullanarak, eşitliğin sağ tarafına yazmış olduğumuz değerin, kullanılan attribute içerisinde olup olmadığına bakılır.
  • elemanlarında :: ile eklenecek olan ikonun, HTML elemanının öncesinde yani sol tarafında yer alması sağlanır.
container sınıfına sahip div’i inceleyiniz.

3 — Belirtilen Bir Değer İle Başlayan [attr^=value]

Bir diğer Attribute Selector türü olarak, bir özelliğin sahip olduğu değerin başlangıç kısmını kontrol ederek stillendirme işlemini gerçekleştirebiliriz Örnek olarak;

  • 2 tane tag’ı ekleyelim.
  • Bu tag’larından birinin özelliğinin değeri diğerinin ise ile başlayan linkler içersin.
  • http ile başlayanın başına güvenilir olmadığına dair bir ikon diğerinin ise güvenli olduğuna dair bir ikon ekleme işlemini gerçekleştirelim.
links sınıfına sahip div’i inceleyiniz.

4 — Belirtilen Bir Değer İle Biten [attr$=value]

Bu Selector kullanımda ise değerin son kısmını kontrol ederiz. Örneğin;

  • 3 tane dosya link’i ekleyelim. (.docx, .xsl, .pdf)
  • Bu 3 dosyanın sahip olduğu uzantıya göre ilgili ikonu ekleme işlemini gerçekleştirebiliriz.
  • Dosya eğer .docx uzantısına sahipse word ikonu, .pdf uzantısına sahipse pdf ikonu ekleyelim.

Word dosyalarında uzantılar doc veya docx olabileceği için iki farklı koşul yazabiliriz.

files sınıfına sahip div’i inceleyiniz

5 — Space Separated Değere Sahip Olan [attribute~=” value”]

Belirtilen özellik değeri eğer boşluk içeren bir takım kelime listesinden oluşuyorsa bu liste içerisinde eşleşen değere sahip olan elemana stillendirme işlemi uygulanır. Örnek olarak;

  • Bir görsel eklediniz ve görselin özelliğine “website logo” yazdınız.
  • Bu elemana ait kelime listesi, website ve logo kelimelerinden oluşmaktadır. CSS tarafında bu kelimelerden birine sahip olan bir değer olup olmadığına bakılarak stillendirme işlemini gerçekleştirebiliriz.

Bu özelliğin 2. tür’de belirttiğim Attribute Selector’dan farkı: Bir bütün olarak yazılan bir kelime içerisinde arama yapılmıyor. Boşluklarla birbirinden ayrılmış kelimeler içerisinde bir arama yapılıyor olmasıdır.

Örneğin 3 tane resim ekleyelim bunlardan tag’ının özelliğinde “logo” değeri bulunan elemanın arka planına ekleyelim.

images sınıfına sahip div’i inceleyiniz

HTML tarafında ikinci görselin özelliğini inceleyecek olursak eğer; İçerisinde logo geçmesine rağmen stillendirme işleminin gerçekleşmediğini görebiliriz. Çünkü kullanmış olduğumuz özel karakter (~)yani boşluklar ile ayrılmış kelimeler arasında bir arama yapmaktadır.

6 — Custom Attribute’e Sahip Olan Eleman [attr]

Dilerseniz kendinizde bir HTML elemanına özelliğini kullanarak custom bir özellik ekleyebilirsiniz.

data-* ile belirlemiş olduğumuz attribute ismini CSS tarafında kontrol ederek elemana still ekleme işlemini gerçekleştirebiliriz. Örneğin içerisinde data-list-item geçen bir elemanın veya elemanların stillendirme işlemine bir bakalım

lists sınıfına sahip div’i inceleyiniz.

Gördüğünüz gibi bu örneğimizde 2 tane liste gösteriminde bulunduk. Ancak listelerimizden birinin içerisinde bulunan li tag’larına, ek olarak custom bir özellik olarak özelliğini ekledik. CSS tarafında da yalnızca bu özelliğe sahip olan elemanları stillendirilme işlemlerini gerçekleşirmiş olduk.

7 — Hyphen Separated Değere Sahip Olan [attribute|=” value”]

Son olarak Hypen Seperated Attribute Selector türüne bir bakalım.

Bir elemana ait bir özelliğin, css tarafında belirtilen değerden sonra hyphen (-) karakteri bulunan elemanların stillendirilme işlemleri gerçekleştiribiliriz. Örneğin;

  • CSS tarafında verdiğiniz değer örneğin bir tarih olabilir. [attr|=1999] gibi. Bu değeri verdiğimiz zaman HTML tarafında bulunan elemana ait özellik değeri içerisinde 1999-…. olan tüm elemanlara stillendirme işlemi gerçekleştirilir.
  • Veya sıklıkla dil seçeneklerinde gördüğümüz “en-En” veya “tr-TR” gibi yazımlarda hyphen kullanımı bulunmaktadır.

CSS tarafında eğer hyphen kullanılan bir elemanın özelliğinin değeri içerisinde tr bulunuyorsa kırmızı renkte, en bulunuyorsa yeşil renkte gösterimini gerçekleştirelim.

languages class’ına sahip div’i inceleyiniz

Aslında bu listeyi deneyebileceğiniz farklı kombinasyonlar ile uzatabiliriz. Sizlerde uygulamalarınızdaki ihtiyaçlara göre farklı kullanım şekilleri ortaya koyabilirsiniz :)

Umarım faydalı bir yazı olmuştur. Eksik veya yanlış olduğunu düşündüğünüz kısımları bana iletirseniz çok sevinirim :)

İletişim kanalları: TwitterLinkedInMail

Bir sonraki yazıda görüşmek üzere!

Bu yazının referansları:

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store