CSS Seçiciler (Selectors)

Selamün Aleyküm Arkadaşlar;

CSS bildirim ve seçici olmak üzere ikiye ayrılır. Bir stili uygulayabilmek için bir XHTML/HTML’de element veya elementleri seçmek gerekir.

div seçici, [margin-left: 10px] ise bildirimdir. Bildirimler özellik ve değerden oluşur.

margin-left özellik; 10px ise değerdir. Değerin sonuna ; konularak diğer bildirime geçilir.

Her seçici yazıldıktan sonra { ile başlar } kapatılır. {} içinde bildirimler yer alır.

[table]

Seçici Açıklama
* Tüm elementleri seçer.
E Element etiketine göre seçer. div, a, p, h1 vs.
E F E elementinin soyundan gelen F elementlerini seçer.
E > F E elementine bağlı olan F elementlerini seçer.
E:first-child E elementinin ilk elementini seçer.
E:link Ziyaret edilmemiş, tıklanmamış elementleri seçer.
E:visited Ziyaret edilmiş, tıklanmış elementleri seçer.
E:active Elemente tıklandığı zaman çalışır.
E:hover Elementin üzerine gelindiğinde çalışır.
E:focus Elemente odaklanıldığında çalışır.
E[ozellikisim] ozellikisim özelliği olan bütün elementleri seçer. Değerine bakılmaz.
E[ozellik=”deger”] Özelliği deger kelimesine eşit olan elementleri seçer.
E[ozellik~=”deger”] Özelliğinde deger kelimesi geçen elementleri seçer.
E[ozellik|=”deger”] Özelliği deger-… olan elementleri seçer.
E.classisim class özelliği classisim eşit olan ve E elementlerini seçer.
E#idisim id özelliği idisim eşit olan ve E elementlerini seçer.

[/table]

Evrensel Seçici (Universal Selector)

Evrensel seçici “*” gösterilir. Bütün elementleri seçer.

 

Element Seçici (Element Selectors)

Bir elementi etiketine göre seçmek için seçmek istediğimiz elementin etiketini yazmamız gerekir.

Örnekte h1 etiketleri seçilip font rengi kırmızı yapılmıştır.

Bir elementin içinde yer alan bir başka elementin seçmek için Ana elementin etiketini yazıp boşluk o elemente bağlı seçmek istediğimiz elementin etiketini yazarız.

Örnekte div içinde yer alan p elementlerinin yazı boyutu, rengi ve arkaplan rengi değiştirilmiştir.

Bir elemente bağlı olan elementleri seçmek için Bağlı olduğu element etiketi > Seçilecek Element etiketi şeklinde yazılır. (E > F)

Örnekte ul elementine bağlı olan li elementlerinin arkaplan rengi ve yazı rengi  değiştirilmiştir.

 

Özellik Seçicileri (Attribute Selectors)

E[attr] attr özelliği olan tüm E elementleri seçer.

E[attr=”deger”] attr özelliği deger eşit olan E elementleri seçer.

E[attr ~= “deger”] attr özelliği deger[boşluk]… olan E elementlerini seçer.

E[attr |= “deger”] attr özelliği deger-… olan E elementlerini seçer.

 

Sınıf Seçicisi (Class Selector)

class özelliğine göre bir elementi seçmek için .classisim kullanılır.

 

Id Seçicisi (Id Selector)

Id özelliğine göre elementleri seçebiliriz. #iddeger olarak kullanılır.

Pseudo-classes

E:active E elementine mouse ile tıklandığı zaman tetiklenir.

E:hover E elementinin üzerine mouse ile gelince tetiklenir.

E:link Hiç tıklanmamış, bağlı link hiç ziyaret edilmemiş E elementleri seçilir.

E:visited Tıklanmış, ziyaret edilmiş E elementleri seçilir.

E:not(seçici) E elementinin içinden not(seçicide tanımlanmış) hariç olanlar seçilir.

E:target URL sonunda #deger ile gelen E elementinin içinde, id özelliğine eşit olan  seçilir.

Pseudo-elements

E:before E elementinden önce içerik ekler.

E:after E elementinden sonra içerik ekler.

E:first-letter E elementinde ilk harfi seçer.

E:first-line E elementinde ilk satırı seçer.

E::selection E elementinde kullanıcı mouse ile alanı seçtiğinde tetiklenir. Mozilla tarayıcında çalışmaz. Mozilla tarayıcında ::-moz-selection bu kod aynı işlemi yapar.


 

UI state pseudo-classes

E:checked E elementinden checked veya selected özelliği olanı seçer.

E :disabled E elementinde disabled özelliği olan, inaktif elementler (form elementleri) seçilir.

E :enabled E elementinde disabled özelliği olmayan, aktif elementler (form elementleri) seçilir.

E:focus E elementine mouse veya klavye (tab ile) ile odaklanıldığında tetiklenir.

E:read-only E elementinde readonly özelliği olanlar seçilir.

E:read-write E elementinde readonly özelliği olmayanlar seçilir.

E:valid E elementinde pattern özelliğindeki kural sağlanıyorsa tetiklenir.

E:invalid E elementinde pattern özelliğindeki kural sağlanmıyorsa tetiklenir.

Not: E:valid ve E:invalid HTML5 pattern özelliğine aittir.

Hayırlı günler, sağlıcakla kalın.

Bu döküman www.ibasoglu.com’a aittir. Kaynak belirtmek suretiyle alıntı yapılabilir.