CSS Seçiciler ile ilgili önemli notlar - 1

CSS'i web ile ilgilenen çoğu kişi detaylı bildiğini düşünür. Bu yazıda, daha detaylı olarak seçicilerin nasıl kullanılabileceğinen bahsedeceğiz.

1. *

* {
 margin: 0;
 padding: 0;
}

* seçicisi, yazdığımız stilin sayfadaki her elemana etki etmesini istediğimiz  zaman kullanabileceğimiz bir seçicidir. Yukarıdaki örnekteki gibi ya da alt bir eleman ile beraber kullanılabilir:

#container * {
 border: 1px solid black;
}

Yukarıdaki şekilde kullanıldığında, container isimli div içerisindeki tüm elemanlara ilgili stili tanımlamamızı sağlar. Benim tavsiyem, browsera yük bindirmesi sebebiyle, çok fazla zorunlu kalınmadığı sürece kullanılmaması yönünde.

 

2. #X

#container {
   width: 960px;
   margin: auto;
}

Çoğu kişinin bildiğini düşündüğüm id seçicisi. Yukarıdaki örnekte container idsi verdiğimiz elemana bu stilleri uygulayacaktır.

 

3. .X

.error {  
 color: red;  
}

Class seçicisi. Bu class'ı verdiğimiz tüm öğelere ilgili stili atar.

 

4. X Y

li a {
  text-decoration: none;
}

HTML elemanlarının içerisine aldığı html elemanlarına stil atamamızı sağlar. Örnek, sayfada li içerisinde bulunan a taglarına bu stili atamamızı istediğimiz zaman kullanılabilir.

 

5. X

a { color: red; }
ul { margin-left: 0; }

HTML elemanlarına stil atamamızı sağlar. Örnekte sayfadaki tüm a ve ul elemanlarına (başka bir stil atanmadıysa) stil atamamızı sağlar.

 

6. X:visited ve X:link

a:link { color: red; }
a:visted { color: purple; }

:link şeklinde yazılan kod, daha önce hiç tıklanmamış link'i ifade eder. :visited ise daha önce ziyaret edilmiş linki. Bu şekilde linklerimizi tıklandıktan sonra farklı, tıklanmadan önce farklı olacak şekilde şekillendirebiliriz.

 

7. X+Y

ul + p {
   color: red;
}

Bu seçici, çok bilinmeyen bitişik seçicilerdendir. Yukarıdaki örnek, sayfada bulunan ul taglarının içerisindeki ilk p taglarını şekillendirmeye olanak sunar.

 

8. X > Y

div#container > ul {
  border: 1px solid black;
}

Bu seçicinin 4. örnekte bahsettiğimiz seçiciden farkı, bir elemanın altında direk o eleman varsa onları seçmemizi sağlamasıdır. Yani tümünü seçmez. Şöyle ki:

 

   <div id="container">
      <ul>
         <li> List Item
           <ul>
              <li> Child </li>
           </ul>
         </li>
         <li> List Item </li>
         <li> List Item </li>
         <li> List Item </li>
      </ul>
   </div>

 

Yukarıdaki örnekte, bir üstteki X > Y şeklindeki CSS seçici şunu sağlar, container id li div'in içerisinde direk bulunan ul objesine stili uygular, ancak bir alt nodunda bulunan li içerisindeki ul objesine bu kodu uygulamaz. 4 nolur örnekten farkı budur.

 

 

9. X ~ Y

ul ~ p {
   color: red;
}

7. örneğe (X+Y) benzerlik gösteren bu seçici, 7. örnekten farklı olarak bir html nesnesinin içindeki ilk nesneye değil tümüne etki etmemizi sağlar. Yukarıdaki örnekten yola çıkarsak, sayfada bulunan ul ler içerisindeki (alt nodlar da dahil) tüm p elemanlarına stil atamamızı sağlar.

 

10. X[attribute]

a[title] {
   color: green;
}

Biliyorsunuz, html elemanlarının attribute diye adlandırılan özellikleri olur. Örneğin a elemanının title, tabindex gibi, img elemanının alt gibi attributleri bulunur. Yukarıdaki şekilde eleman[attribute] (Örnekte title'ı olan a'lara stil atanmıştır) şeklinde de seçici kullanımı yapılabiliyor.

Yazının devamı için tıklayınız.

shadow coder diyor ki:
22.06.2012 18:25:18
gerçekten çok etkili bir paylaşım olmuş , acemilerden profesyonellere kadar herkes zaman zaman girip faydalanabilir ..
burhan korkmaz diyor ki:
28.11.2012 13:17:42
güzel makale

Yorum Gönder

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