CSS, yalnızca öğe türünü göre değil, aynı zamanda öğelerin niteliksel değerlerini bildiren özelliklerine (özniteliklerine) dayalı bir seçim yapmanın ve stil hazırlamanın da bir yolunu sağlar.
Öznitelikler, HTML elementlerine ek bilgi sağlayan ifadelerdir. Örneğin;
|
1 2 3 |
<img src="resim.jpg" alt="manzara"> |
Yukarıdaki HTML bildiriminde <img> web sayfanıza resim eklemeye yarayan bir HTML öğesidir. Tek başına kullanılmasının pek bir anlamı olmayabilir. Çünkü bir resim eklemek istiyorsanız mutlaka kaynağının hangi resim dosyası olacağının bildirilmesi gerekir. Belkide görüntülenememe ihtimaline karşı, basit bir kelime ile resimle ilgili küçük bir bilgi notu bildirmekte gerekir. İşte tam bu noktada <img> öğesine has özellikleri devreye almalısınız. Örneğimizde bulunan src ve alt özellikleri bunu sağlamaktadır. HTML öğelerinin bu türden özelliklerle destekleniyor olması sadece <img> ‘ye özgü bir durum değildir. Daha pek çok türden HTML öğelerinde bu türden özellik kullanımı görebilirsiniz.
CSS ile öğeleri seçmek için pek çok farklı yönden seçici kullanımı mevcuttur. CSS Seçicileri başlıklı yazımızda tüm bu seçicileri daha önce incelemiştik. Şimdi bunlara eklenen CSS Özellik Seçicileri (Attribute Selectors), HTML öğelerinin sahip olduğu özelliklere veya özellik değerlerine göre seçmenize olanak sağlayan yolları sunar. Özellik seçimi özel bir sözdizimine sahiptir. Özellik Seçicilerinin kullanım şekillerini ve sahip oldukları etkileri örnekleri üzerinden inceleyelim;
CSS [özellik] Seçicisi
Seçici, belirli bir özelliğe sahip olan öğeleri seçmek için kullanılır.
Örnek;
Aşağıdaki örnek, “title” özelliği bulunan tüm öğelerini seçer.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <style> [title]{ background-color: yellow; } </style> </head> <body> <h2 title="Lorem Ipsum">Lorem Ipsum Nedir?</h2> <p><span title="Lorem">Lorem Ipsum</span>, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. <span title="Lorem">Lorem Ipsum</span>, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.</p> </body> </html> |
CSS öğe[özellik] Seçicisi
Özellik seçicilerini, bir öğe seçicisi ile belirtmekte mümkündür. Bu tür bir birlikte kullanım, belirli bir HTML öğesi ile kısıtlama yapma imkanı verir.
Örnek;
Aşağıdaki örnek, “title” özelliği bulunan tüm <a> öğelerini seçer;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <style> a[title] { background-color: yellow; } </style> </head> <body> <a href="https://www.yazilimbilisim.net" title="yazilimbilisim">yazilimbilisim.net</a> <a href="http://www.ahmetcansever.com" target="_blank" title="ahmetcansever">ahmetcansever.com</a> <a href="http://www.google.com" target="_top">google.com</a> </body> </html> |
CSS [nitelik = “değer”] Seçicisi
Seçici, belirli özellik değerlerine sahip öğeleri seçmek için kullanılır.
Örnek;
Aşağıdaki örnek, tüm <input> form öğelerinden type = “checkbox” nitelikli onay kutularını seçer.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <style> input[type=checkbox] { width: 30px; height: 30px; } </style> </head> <body> <form action="https://yazilimbilisim.net/Default.aspx" method="get"> <input type="checkbox" name="web" value="Web"> Web Tasarım<br> <input type="checkbox" name="grafik" value="Grafik"> Grafik Animasyon <br> <input type="radio" name="ders" value="Elektronik">Elektronik<br> <input type="radio" name="ders" value="Veritabanı">Veritabanı<br> </form> </body> </html> |
CSS [özellik ~ = “değer”] Seçici
Seçici belirli bir kelime ihtiva eden bir özellik değerine sahip elemanları seçmek için kullanılır.
Örnek;
Aşağıdaki örnekte alt özelliğinde “özgür” kelimesi geçen resimlere stil uygulanmıştır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <style> img[alt~=özgür] { border: 3px solid red; } </style> </head> <body> <img src="image.jpg" alt="özgür filistin"> <img src="Palestine.jpg" alt="filistin"> <img src="res.png" alt="özgür"> </body> </html> |
CSS [özellik | = “değer”] Seçici
Seçici, özelliği belirtilen değer ile başlayan öğeleri seçmek için kullanılır. Burada değer ifadesi (-) işareti ile ayrılmış şekilde tek bir kelime olmalıdır.
Örnek;
Aşağıdaki örnek, “ust” değeri ile başlayan sınıflara ait tüm öğeleri seçer.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <style> p[class|=ust]{ background-color: yellow; } </style> </head> <body> <p class="ust-menu">Bu bir paragraftır</p> <p class="ustmenu">Bu bir paragraftır</p> <p class="sol-ust">Bu bir paragraftır</p> <p class="sagust">Bu bir paragraftır</p> </body> </html> |
CSS [özellik ^ = “değer”] Seçici
Seçici olan özellik değeri belirli bir değer ile başlayan elemanları seçmek için kullanılır. Bu değer bir kelimeyle aynı olmak zorunda değildir!
Örnek;
Aşağıdaki örnek, “ust” değeri ile başlayan bir sınıflara sahip tüm öğeleri seçer.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <style> p[class^=ust]{ background-color: yellow; } </style> </head> <body> <p class="ust">Bu bir paragraftır</p> <p class="ustmenu">Bu bir paragraftır</p> <p class="sol-ust">Bu bir paragraftır</p> <p class="sagust">Bu bir paragraftır</p> </body> </html> |
CSS [özellik $ = “value”] Seçici
Seçici olan özellik değeri, belirli bir değer ile sona eren elemanları seçmek için kullanılır. Bu değer bir kelimeyle aynı olmak zorunda değildir!
Örnek;
Aşağıdaki örnek, “menu” ile biten bir sınıf öznitelik değeri olan tüm öğeleri seçer:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <style> p[class$=menu]{ background-color: yellow; } </style> </head> <body> <p class="menualt">Bu bir paragraftır</p> <p class="meslek">Bu bir paragraftır</p> <p class="sol-menu">Bu bir paragraftır</p> <p class="sagmenu">Bu bir paragraftır</p> </body> </html> |
CSS [özellik * = “değer”] Seçici
Seçici, özellik değeri içinde belirli bir değeri barındıran öğeleri seçmek için kullanılır. Bu değer bir kelimeyle aynı olmak zorunda değildir!
Örnek;
Aşağıdaki örneğimizde içinde “menu” ifadesi geçen sınıflar seçilmekte ve stil uygulanmaktadır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <style> p[class*=menu]{ background-color: yellow; } </style> </head> <body> <p class="menu">Bu bir paragraftır</p> <p class="meslek">Bu bir paragraftır</p> <p class="sol-menu">Bu bir paragraftır</p> <p class="sagmenu">Bu bir paragraftır</p> </body> </html> |
[…] […]