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 attribute olarak geçmektedir.
attribute : /ˈatrɪbjuːt/
a quality or feature regarded as a characteristic or inherent part of someone or something.
Bir şeyin veya birinin karakteristik veya içsel bir parçası olarak kabul edilen bir nitelik veya özellik.
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.
Örneğin;
- img tag’ını kullanarak bir görsel göstermek istediğimizde, görselin yolunu belirtmek için src özelliğinden yararlanıyor oluruz.
- a tag’ını kullanarak bir url paylaşmak istediğimizde bunu, a elemanına ait href ö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 spesifik 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. Attribute Selectors’ı Türkçeye çevirecek olursak eğer Özellik Seçici 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 https://www.instagram.com/safaelmali 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 a 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 Font Awesome 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.
- Psudeo elemanlarında ::before ile eklenecek olan ikonun, HTML elemanının öncesinde yani sol tarafında yer alması sağlanır.
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 a tag’ı ekleyelim.
- Bu a tag’larından birinin href özelliğinin değeri http diğerinin ise https 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.
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.
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 alt ö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 img tag’ının alt özelliğinde “logo” değeri bulunan elemanın arka planına drop-shadow ekleyelim.
HTML tarafında ikinci görselin alt ö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 (~) space seperated 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 data-* ö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
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 data-list-item ö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.
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ı: Twitter — LinkedIn — Mail
Bir sonraki yazıda görüşmek üzere!
Bu yazının referansları:
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
