CSS Seçiciler ile ilgili önemli notlar - 2

CSS seçicile ile ilgili bilgilere buradan devam edebilirsiniz.

11. X[attribute="herhangibirsey"]

a[href="http://www.cenkebret.com"] {
  color: #5CADC2;
}

Bir önceki yazımda (CSS Seçiciler ile ilgili önemli notlar - 1) 10. örnekte attribute'u olan bir nesneye stil atamaktan bahsetmiştim. Yukarıdaki örnekte bunu biraz detaylandırıp, ilgili attribute'ün içeriğine göre stil vermeyi görebilirsiniz. Türkçesi, http://www.cenkebret.com olarak eklenmiş olan linklere bu stili ata!


12. X[attribute*="herhangibirsey"]

a[href*="cenkebret"] { color: #1f6053; }

Biraz daha detaylandıralım. 11. örnekte kesinlik var iken, bu örnekte kesinlik bulunmuyor. Kısaca yukarıdaki örnek şunu ifade ediyor, href attribute'ü ne olursa olsun, bu attribute içinde bir yerde cenkebret kelimesi geçiyorsa, ona bu stili ata. Gitgide eğlenceli bir hal alıyor, ne dersiniz?

 

13. X[attribute^="herhangibirsey"]

a[href^="http"] {
   background: url(path/to/external/icon.png) no-repeat;
   padding-left: 10px;
} 

Bu örnekte, ilgili attribute'un içeriği şunun ile başlıyorsa şu stili ata demenin yöntemini görebilirsiniz. Yani örneği açıklayacak olursak, href tagı http ile başlayan tüm a objelerine stil vermeyi nasıl yapabileceğinizi görebilirsiniz.

 

14. X[attribute$="herhangibirsey"]

a[href$=".jpg"] {
   color: red;
}

Bu seçici, ilgili attribute'un içeriği şunun ile bitiyorsa şu stili ata dememizi sağlıyor. Örneğin href attribute'unun sonu jpg olarak biten tüm a objelerine stil atayabiliyoruz.

 

15. X[data-*="herhangibirsey"]

Bir önceki örneğe bakacak olursak, uzantısı .jpg, .gif, .png, .jpeg olan tüm resim linklerimize stil atamak için şunu yapmamız gerekiyordu:

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
   color: red;
}

Bu örnekte bunu yapmanın daha kolay bir yolunu göreceğiz. Şöyle ki, imaj içeren tüm linklerimize data-type="image" şeklinde bir attribute atadığımızı varsayalım. Yani şöyle:

<a href="path/to/image.jpg" data-filetype="image">JPG Resim linki </a>

<a href="path/to/image.png" data-filetype="image">PNG Resim linki </a>

<a href="path/to/image.gif" data-filetype="image">GIF Resim linki </a>

<a href="path/to/image.jpeg" data-filetype="image">JPEG Resim linki </a>

Bunların tümüne nasıl mı stil atayacağız? Çok basit. Sadece şunu yazıyoruz:

a[data-filetype="image"] {  
   color: red;  
} 

İşte bu kadar!

 

16. X[herhangibirsey~="herhangibaskabirsey"]

a[data-info~="external"] {
   color: red;
}

a[data-info~="image"] {
   border: 1px solid black;
}

Yukarıdaki örnek, data-info nodu external içeren ve data-info nodu image içeren a objelerine stil atamamızı sağlıyor. İçermesi yeterli. Her ikisini de içeren bir a objesi eklersek onu da iki classa göre şekillendirmemizi sağlar:

<a href="path/to/image.jpg" data-info="external image"> Her iki stili de alacak link</a>

Gibi.

 

17. X:checked

input[type=radio]:checked {
   border: 1px solid black;
}

İşaretlenebilir bir html objesinin (radio button ya da checkbox) işaretlendiğinde alacağı stili belirlememizi sağlar.

 

18. X:after

p:after
{
content:"- Önemli Not";
background-color:yellow;
color:red;
font-weight:bold;
}

Bu seçici ile, seçilen elemandan sonra bazı stiller atayabilir ya da içerik ekleyebilirsiniz. Yukarıdaki örneği uyguladığınızda, sayfada bulunan p objelerinin sonuna kırmızı renkte ve sarı backgroundu olacak şekilde, bold bir "- Önemli Not" yazısı ekleyebilirsiniz. Güzel iş!

 

19. X:hover

a:hover {
 border-bottom: 1px solid black;
}

Mouse ile üzerine gelindiğinde stilinin değişmesini istediğiniz objeleri bu seçici sayesinde şekillendirebilirsiniz.

 

20. X:not(secici)

div:not(#container) {
   color: blue;
}

Örneğin div objelerinin hepsine, bir stil atamak istiyorsunuz, ama id'si container olmayan hepsine. Bu seçici ile bunu yapmanız mümkün!

 

Selahattin YILDAN diyor ki:
14.06.2013 23:41:43
Elinize Sağlık Çok Bilgilendirici bir konu olmuş özelliklede attribute onları öğrendiğim çok iyi oldu keşke şu (::) ve (@) başlayan css özelliklerinide tanıtsaydınız yinede elinize sağlık. Teşekkürler :)
yusuf diyor ki:
17.08.2013 19:27:54
Teşekkürler yazılarınızı takip ediyorum.

Yorum Gönder

Ad Soyad:
E-Posta:
URL:
Yorum:
© Copyright 2011 Cenk EBRET