Seçiciler


Hangi etiketleri biçimlendirmek istediğiniz seçiciler çeşitli formlarda ifade edilebilir. Yukardaki örnekteki gibi aynı özellikleri vermek istediğiniz birden fazla seçici, aralarına virgül koyarak yazılabilir. Aşağıda CSS'teki seçici türleri gösterilmiştir:

1. Etiket: Stilin sadece belirli etiketlere uygulanması için kullanılır. Örneğin; body {background-color:purple;} body etiketinin arkaplan rengini mor yapar.
   
2. Sınıf: Stilin sadece belirli bir sınıfa ait etiketlere uygulanması için kullanılır. Örneğin; h1.patates {font-family:Verdana;} sadece sınıfı patates olan h1'lerin fontunu Verdana yapar.
   
3. Id: Stilin sadece belirli bir id'deki etikete uygulanması için kullanılır. Örneğin; img#patates {border:2px;} sadece id'si patates olan resimlerin etrafına 2px kalınlığında border çeker.
   
4. Genel: Bu seçici *(yıldız)dır ve bütün etiketlerin yerini tutar. Örneğin;
   *.patates {color:yellow;}
   .patlican {color:yellow;} sınıfı patates olan bütün etiketlerin yazı rengini sarı yapacaktır. Bu işaretin kullanılması isteğe bağlıdır. Yani ikinci örnek de ilk örnekteki gibi tüm etiketlere etki eder ve sınıfı patlican olan tüm etiketlerin yazı rengini sarı yapar.
   
5. Alt etiket: Bir stili, belirli bir etiketin içindeki başka bir etikete uygulamak için kullanılır. Örneğin; div.patates h1 {font-size:20;} sınıfı patates olan div'in altındaki h1'lerin font büyüklüğünü 20 yapar.
   
6. Ardışık etiket: Stilin sadece belirli bir etiketin arkasından gelen başka bir etikete uygulanması için kullanılır. Örneğin;
   h1 + p {color:yellow;} sadece h1 etiketinin arkasından gelen paragraflardaki yazı renginin sarı olmasını sağlayacaktır.
   
7. Özellik: Sadece belirli bir özelliği taşıyan etiketlere stil uygulamak için kullanılır. Örneğin; a[href="http://e-bergi.com"] { color:red; } sadece adresi "http://e-bergi.com" olan linklerin rengini kırmızı yapacaktır.
   
8. Sözde sınıflar (pseudo-class): Belli bir niteliğe sahip etiketleri seçmek için kullanılır. Bazı çok kullanılan pseudo-class'lar ve yorum halindeki açıklamaları aşağıdadır: a:link { color: "#0000ff" } /* Standart linkler */
   a:visited { color: "#ff00ff" } /* Ziyaret edilmiş linkler */
   a:active { color: "#ff0000" } /* Aktif linkler */
   a:hover { color: "#00ff00" } /* Fare ile üzerine gelinen nesneler */
   li:first-child { font-size: 20px } /* Bir etiketin, üst etiket içindeki ilk örneği */
   p:first-line { font-weight: bold } /* Bir paragrafın ilk satırı */
   p:first-letter { font-weight: bold } /* Bir paragrafın ilk harfi */