LOADING

Type to search

Share

Özellik Seçicileri HTML, XHTML veya XML dokümanlarındaki seçilen etiketin özelliklerine veya özellik değerlerine göre tanımlama yapmamızı sağlar.

Bildiğiniz gibi CSS ile HTML web sitelerinizin görünümünü özelleştirebilirsiniz. Bazen sıfırdan yazdığınız bir web sitesinde derinlemesine kullanım ihtiyacı duymazsınız yada en basit class ve identity özellikleri ile basit koşullarda CSS kodlamanızı tamamlayabilirsiniz. Fakat bazen, özellikle mevcut bir projeyi yeniden düzenlemek istiyorsanız o zaman CSS’in derinlemesine programlanmasını kullanmak isteyebilirsiniz.

Bu makaleyi okuyorsanız zaten derinlemesine CSS gücünü keşfetmeye başlamışsınız demektir. CSS ile tarayıcı ekranının boyutunu eşit parçalara bölebilir, matematiksel işlemleri yapabilir ve render edilmiş tüm elementlere birden fazla koşul ile ulaşabilirsiniz. Fakat ben bugün attribute (özellik) seçenekleriyle nasıl ve ne şartlarda kullanabileceğiniz konusuna değineceğim.

CSS Attribute (özellik seçici) Kullanımı

İşte CSS ile bazı özelliklere ulaşmanızı sağlayan kodlama örnekleri

[data-value] {
  /* Eğer bir elementin belirlenen attribute anahtarı varsa */
}

[data-value="foo"] {
  /* Eğer bir elementin belirlenen attribute anahtarı var ve değeri tam olarak eşleşiyorsa */
}

[data-value*="foo"] {
  /* Eğer bir elementin belirlenen attribute anahtarı var ve değeri içinde geçiyorsa */
}

[data-value~="foo"] {
  /* Eğer bir elementin belirlenen attribute anahtarı var ve içinde boşluklarla bulunuyorsa */
}

[data-value^="foo"] {
  /* Eğer bir elementin belirlenen attribute anahtarı var ve belirtilen değer ile başlıyorsa */
}

[data-value|="foo"] {
  /* Eğer bir elementin belirlenen attribute anahtarı var ve kesme ile bulunuyorsa */
}

[data-value$="foo"] {
  /* Eğer bir elementin belirlenen attribute anahtarı var ve belirtilen değer ile bitiyorsa */
}

Gördüğünüz gibi ufak bir “search” mantığı gibi davranan özel operatörler ile elementlere ulaşabilirsiniz. Örnek vermek gerekirse; elementimiz şöyle olun;

<div class="col-lg-12"><img src="abc.jpg" alt="metin1" /></div><div class="col-lg-12"><img src="abc.jpg" alt="metin2" /></div>

Bu kodlamada IMG elementlerine erişim için bir kaç farklı seçeneğimiz var. Fakat sadece alt=”metin2″ olan elemente ulaşmak istersek;

img[alt="metin1"] { margin-bottom:10px;}

gibi bir css kuralı ile ulaşabiliriz. Yada tüm col-lg-12 class’ına sahip IMG elementlerine ulaşmak istersek;

.col-lg-12 img {margin-bottom:10px;}

gibi bir css kuralıyla ulaşabiliriz.

Eğer derinlemesine ilerliyorsak ve sadece ilk sırada ki imajlara ulaşmak istersek

.col-lg-12 > img {}

kuralı bizim için yeterli olacaktır. Yine burada bir attribute ile daraltma yapmak istersek;

.col-lg-12 > img[alt="metin1""] {}

şeklinde bir kural işimizi görecektir.

Attribute (özellikler) sadece alt ile sınırlı değildir. Bir elemente tanımlanan tüm attribute’ları kullanabilirsiniz. Hatta data- ile başlayıp yeni özellikler ekleyebilirsiniz. data- ile başlayan özellikler aslında daha çok jquery kütüphanelerinde kullanılıyor. Size oldukça esneklik sağlayabilir.

Bu seçenekleri isterseniz birbiri ile kombine edebilirsiniz.

Örneğin;

img[alt~="person"][src*="lorem"] { margin-bottom:10px; }

Bir IMG elementi alt etiketi içinde “person” kelimesini boşluk ile barındırıyorsa ve src etiketi içinde lorem bulunuyorsa, bu kural geçerli olacaktır.

Tags:
Anthony Burak DURSUN

Adjans Digital Agency CEO, Gömülü sistemler, yazılım, fotoğraf çekmek, tasarım, teknoloji konularına hisli, evli, 4 kedi babası, asabi, anksiyetik bir kişi. Tekrarlayan şeyleri sevmez, her an her şey hakkında yazabilir, konuşabilir. Önceki hayatında marangoz olduğunu düşünüyor.

  • 1

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.