CSS Özellik Seçicisi Açıklaması
- Önceki Sayfa CSS ID Seçicisi Açıklaması
- Sonraki Sayfa CSS Çocuk Seçicisi
CSS 2, özellik seçicisini tanıttı.
Özellik seçicileri, elemanın özelliklerini ve özellik değerlerini kullanarak elemanları seçebilir.
Basit Özellik Seçici
Belirli bir özellikteki öğeleri seçmek ve bu özellik değerine bakmaksızın, basit özellik seçicisini kullanabilirsiniz.
Örnek 1
Başlık (title) içeren tüm öğeleri kırmızıya çevirmek istiyorsanız, şu şekilde yazabilirsiniz:
*[title] {color:red;}
Örnek 2
Yukarıdaki gibi, sadece href özelliğine sahip olan bağlara (a ögesi) stil uygulamak mümkündür:
a[href] {color:red;}
Örnek 3
Birden fazla özelliklere göre seçim yapabilirsiniz, sadece özellik seçicilerini birbirine bağlayabilirsiniz.
Örneğin, hem href hem de title özelliklerine sahip olan HTML bağlantılarının metnini kırmızı yapmak için şu şekilde yazabilirsiniz:
a[href][title] {color:red;}
Örnek 4
Bu özelliği bazı yaratıcı yöntemlerle kullanabilirsiniz.
Örneğin, alt özelliğine sahip tüm resimlere stil uygulayarak bu geçerli resimleri vurgulayabilirsiniz:
img[alt] {border: 5px solid red;}
İpucu:Bu özel örnek, daha çok tanımlama yerine teşhis için daha uygun, yani resmin gerçekten geçerli olup olmadığını belirlemek için kullanılır.
Örnek 5: XML belgelerinde özellik seçicisi kullanımı
Özellik seçicileri, XML dilinin element ve özellik isimlerini kullanım amacına göre belirtmesini teşvik ettiği için XML belgelerinde oldukça kullanışlıdır.
Güneş sistemindeki gezegenleri tanımlayan bir XML belgesi tasarladığımızı varsayalım. moons özelliğine sahip tüm planet elementlerini kırmızı gösterecek ve bu gezegenlere daha fazla dikkat çekmek istiyorsak, şu şekilde yazabiliriz:
planet[moons] {color:red;}
Bu, aşağıdaki etiket parçasındaki ikinci ve üçüncü elementlerin metnini kırmızı gösterecek, ancak birinci elementin metni kırmızı olmayacaktır:
<planet>Venus</planet> <planet moons="1">Earth</planet> <planet moons="2">Mars</planet>
Özellik değerlerine göre seçim yapma
Bazı özelliklere sahip olan elementleri seçmekten başka, belirli özellik değerlerine sahip olan elementleri seçmek için daha da daraltabilirsiniz.
Örnek 1
Örneğin, Web sunucusundaki belirli bir belgeye yönlendiren bağlantıyı kırmızı yapmak istiyorsanız, şu şekilde yazabilirsiniz:
a[href="http://www.codew3c.com/about_us.asp"] {color: red;}
Örnek 2
Basit özellik seçicilerine benzer şekilde, birden fazla özellik-değer seçicisini bir araya getirerek bir belgeyi seçebilirsiniz.
a[href="http://www.codew3c.com/"][title="W3School"] {color: red;}
Bu, aşağıdaki etiketlerdeki ilk bağlantı metnini kırmızı yapar, ancak ikinci veya üçüncü bağlantı etkilendirilmez:
<a href="http://www.codew3c.com/" title="W3School">W3School</a> <a href="http://www.codew3c.com/css/" title="CSS">CSS</a> <a href="http://www.codew3c.com/html/" title="HTML">HTML</a>
Örnek 3
Aynı şekilde, XML dili de bu yöntemi tarz ayarlama için kullanabilir.
Şimdi, gezegen örneğimize geri dönelim. moons özellik değeri 1 olan planet elementlerini seçmek istiyorsak:
planet[moons="1"] {color: red;}
Yukarıdaki kod, aşağıdaki etiketlerin ikinci elementini kırmızı yapacak, ancak birinci ve üçüncü element etkilenmeyecektir:
<planet>Venus</planet> <planet moons="1">Earth</planet> <planet moons="2">Mars</planet>
Özellik ve özellik değeri tam olarak eşleşmeli
Lütfen bu formatta, özellik değeri ile tam olarak eşleşmesi gerektiğini unutmayın.
Özellik değeri, boşluklarla ayrılmış bir değer listesi içeriyorsa, eşleşme sorunları ortaya çıkabilir.
Aşağıdaki etiket parçasını düşünün:
<p class="important warning">Bu paragraf, çok önemli bir uyarıdır.</p>
p[class="important"] olarak yazılırsa, bu kural örnek etiketleri ile eşleşemez.
Belirli bir özellik değeri ile elementi seçmek için aşağıdaki gibi yazılmalıdır:
p[class="important warning"] {color: red;}
Kısmi属性值 seçimine göre
Özellik değeri içindeki kelime listesinin belirli bir kelimesine göre seçim yapmak gerekiyorsa, tilde işareti (~) kullanılmalıdır.
Class özelliğinde important içeren elementleri seçmek istiyorsanız, aşağıdaki seçici kullanabilirsiniz:
p[class~="important"] {color: red;}
Dalga işaretini göz ardı edildiğinde, tam değere tam olarak eşleşmesi gerektiği anlaşılır.
Kısmi değer属性选择器 ile nokta sınıf adı notasyonunun farkı
Bu seçici, sınıf seçicilerinde tartıştığımız nokta sınıf adı notasyonuna eşittir.
Yani, p.important ve p[class="important"] HTML belgesine uygulanırken eşdeğerdir.
Peki neden "~="属性 seçici hala var? Çünkü bu, sadece class değil, herhangi bir özellik için kullanılabilir.
Örneğin, büyük bir resim içeren bir belge olabilir, ancak bunların yalnızca bir kısmı gerçek resimlerdir. Buna göre, bu resimleri seçmek için title belge kısmı属性 seçici kullanılabilir:
img[title~="Figure"] {border: 1px solid gray;}
Bu kural, title metninde "Figure" içeren tüm görselleri seçer. title özelliği olmayan veya title özelliğinde "Figure" içermeyen görseller eşlenmez.
Alt dizisi Eşleştirme Özellik Seçicileri
Aşağıda, CSS2'nin tamamlanması sonrasında yayınlanan ve daha fazla parçalı değer özellik seçicisini içeren daha ileri bir seçici modülünü tanıtmanızı istiyorum. Düzenlemeye göre, bu seçicilere "Alt dizisi Eşleştirme Özellik Seçicileri" denmelidir.
Birçok modern tarayıcı bu seçicileri destekler, bunlar arasında IE7 de bulunur.
Aşağıdaki tablo, bu seçicilerin basit bir özetidır:
| Türler | Açıklama |
|---|---|
| [abc^="def"] | abc özellik değerinin "def" ile başlayan tüm elementleri seçin |
| [abc$="def"] | abc özellik değerinin "def" ile biten tüm elementleri seçin |
| [abc*="def"] | abc özellik değerinde "def" alt dizisini içeren tüm elementleri seçin |
Bu seçicilerin birçok kullanım alanı vardır.
Örneğin, CodeW3C.com'ya yönlendiren tüm bağlantılara stil uygulamak istiyorsanız, tüm bu bağlantılara class belirlemek ve bu sınıfa göre stil yazmak yerine, aşağıdaki kuralları yeterli olacaktır:
a[href*="codew3c.com"] {color: red;}
İpucu:Bu seçiciler herhangi bir özellik için kullanılabilir.
Belirli Özellik Seçici Türleri
Son olarak, belirli özellik seçicilerini tanıtmanızı istiyorum. Aşağıdaki örneklere göz atın:
*[lang|="en"] {color: red;}
Bu kural, lang özelliği en veya en- ile başlayan tüm elementleri seçer. Bu nedenle, aşağıdaki örnek etiketindeki ilk üç element seçilecek, son iki element seçilmeyecektir:
<p lang="en">Hello!</p> <p lang="en-us">Greetings!</p> <p lang="en-au">G'day!</p> <p lang="fr">Bonjour!</p> <p lang="cy-en">Jrooana!</p>
Genel olarak, [att|="val"] herhangi bir özellik ve değer için kullanılabilir.
Bir HTML belgesinde bir dizi görsel olduğunu varsayalım, her bir görselin dosya adı şu şekilde olacaktır: figure-1.jpg ve figure-2.jpgAşağıdaki seçicilerle tüm bu görselleri eşleyebilirsiniz:
img[src|="figure"] {border: 1px solid gray;}
Elbette, bu özellik seçicisinin en yaygın kullanım hali dilleri eşlemektir.
CSS Seçici Referans Kılavuzu
| Seçici | Açıklama |
|---|---|
| [attribute] | Belirtilen özellikle sahip her elementi seçer. |
| [attribute=value] | Belirtilen özellik ve değeri olan her elementi seçer. |
| [attribute~=value] | Belirtilen değeri içeren her özellik değeri ile eşleşen her elementi seçer. |
| [attribute|=value] | Belirtilen değeri başında biten ve bu değer tam bir kelime olan özellik değerine sahip olan elementleri seçer. |
| [attribute^=value] | Belirtilen değeri başında biten her özellik değeri ile eşleşen her elementi eşleştirir. |
| [attribute$=value] | Belirtilen değeri sonunda biten her özellik değeri ile eşleşen her elementi eşleştirir. |
| [attribute*=value] | Belirtilen değeri içeren her özellik değeri ile eşleşen her elementi eşleştirir. |
- Önceki Sayfa CSS ID Seçicisi Açıklaması
- Sonraki Sayfa CSS Çocuk Seçicisi
