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