CSS Seçiciler(Selector)-1
HTML belgesinde nesneleri seçmek için CSS’de kullanılan birçok seçici bulunmaktadır. Tüm bu seçicilere sırasıyla bakalım.
1) Evrensel Seçici (*) 
a) Tüm nesneleri seçmek için kullanılır.
/* * Tüm nesnelerin rengini mavi yapar. */ * { color: blue }
b) Bir nesne içerisindeki tüm nesneleri seçer.
/* * lifeacode divinin içindeki tüm nesneleri seçer ve yazıların altını çizer. */ div.lifeacode * { text-decoration: underline }
2) Id “Tekil” Seçici(#X) 
Id’si x’e eşit olan nesneleri seçer.
/* * id'si lifeacode paragrafı seçer ve rengini mavi yapar. */ p#lifeacode{ color: blue }
3) Sınıf Seçici(.X) 
Class niteliği x’e eşit olan nesneleri seçer.
/* * class özelliği lifeacode olan a nesnesini seçer ve rengini sarı yapar */ a.lifeacode{ color: yellow }
4) Torun Seçici(X Y) 
X nesnesi içerisindeki Y nesnesini seçer.
/* * ornek isimi bir sınıf tanımladık ve altına n isimli bir nesne tanımladık, rengini ise mavi yaptık. */ .ornek n { background-color: blue }
5) Basit Seçici (X) 
Doğrudan x nesnesinin seçimini yapar.
/* * a nesnesini seçer alt çizgileri yok eder. */ a { text-decoration: none }
6) Sözde Sınıf Seçiciler (X) 
a) :link seçicisi daha önce tıklanmamış linkler üzerinde işlem yapmamızı sağlar.
/* * a nesnesinin arka plan rengini mavi yapar. */ a:link { background-color: blue }
a) :visited seçicisi daha önce tıklanan(ziyaret edilen) linkler üzerinde işlem yapmamızı sağlar.
/* * a nesnesinin arka plan rengini turuncu yapar. */ a:visited { background-color: orange }
7) Birleşik(Bitişik) Seçici (X + Y) 
X ve Y nesnesini birlikte seçer.
/* * ul nesnesi ile p nesnesini birlikte seçer. */ ul+ p { color: blue }
8) Child(Çocuk) Seçici (X > Y) 
X ve Y nesnesini birlikte seçer.
/* * Sınıfı sehir olan ul içindeki li nesnelerine kenarlık ekler. */ ul.sehir> li { border: 2px solid #000 }
9) X ~ Y Seçici 
Bitişik seçici’den farklı olarak, X nesnesi altındaki tüm Y (ebeveyn) nesnelerini seçer.
/* * ul nesnesi altındaki tüm p nesnelerinin rengini mavi yapar. */ ul ~ p { color: blue }
10) Nitelik Seçici(X[Y]) 
X nesnesinde Y niteliği bulunan nesneleri seçer.
/* * a nesneleri içerisine title niteliği */ a[title] { color: red }
Benzer Konular:
CSS Seçicileri(Selector)-2 sayfasına ulaşmak için tıklayın