HTML sayfasında nesneleri seçmek için CSS’de bir çok seçici bulunmaktadır.. Sırasıyla tüm bu seçicileri öğreneceğiz ancak bölümler halinde öğreneceğiz.. Bu bölümde aşağıdaki seçicileri öğreneceğiz;
- * (Evrensel Seçici)
- #X (ID “Tekil” Seçici)
- .X (Sınıf Seçici)
- X Y (Torun Seçici)
- X (Basit Seçici)
- X:link ve X:visited (Sözde Sınıf Seçicileri)
- X + Y (Bitişik Seçici)
- X > Y (Çocuk Seçici)
- X ~ Y
- X[Y] (Nitelik Seçici)
HTML sayfasında nesneleri seçmek için CSS’de bir çok seçici bulunmaktadır.. Sırasıyla tüm bu seçicileri öğreneceğiz ancak bölümler halinde öğreneceğiz.. Bu bölümde aşağıdaki seçicileri öğreneceğiz;
1) * (Evrensel Seçici)
Tüm nesneleri seçmek için kullanılır.
/*
* tüm nesneleri seçer ve rengini kırmızı yapar
*/
* {
color: red
}
.. ya da bir nesne içerisindeki tüm nesneleri seçmek için ..
/*
* divlerden sınıfı erbilen olan divin içindeki tüm nesneleri
* seçer ve yazıların altını çizer
*/
div.erbilen * {
text-decoration: underline
}
Tarayıcı DesteğiIE6+, Firefox, Chrome, Safari, Opera
2) #X (ID “Tekil” Seçici)
Id niteliği x’e eşit olan nesneleri seçmek için kullanılır.
/*
* erbilen id'li paragrafı seçer ve rengini kırmızı yapar
*/
p#erbilen {
color: red
}
Tarayıcı DesteğiIE6+, Firefox, Chrome, Safari, Opera
3) .X (Sınıf Seçici)
Class niteliği x’e eşit olan nesneleri seçmek için kullanılır.
/*
* erbilen sıınflı a nesnesini seçer ve rengini mavi yapar
*/
a.erbilen {
color: blue
}
Tarayıcı DesteğiIE6+, Firefox, Chrome, Safari, Opera
4) X Y (Torun Seçici)
X nesnesinde bulunan Y nesnelerini seçmek için kullanılır.
/*
* test sınıflı nesne içerisinde bulunan
* a nesnesini seçip arka plan rengini sarı yapar
*/
.test a {
background-color: yellow
}
Tarayıcı DesteğiIE6+, Firefox, Chrome, Safari, Opera
5) X (Basit Seçici)
Herhangi bir niteliği olmayan doğrudan X nesnesini seçmek için kullanılır.
/*
* a nesnelerini seçip alt çizgilerini kaldırır
*/
a {
text-decoration: none
}
Tarayıcı DesteğiIE6+, Firefox, Chrome, Safari, Opera
6) X:link ve X:visited (Sözde Sınıf Seçicileri)
Daha önce tıklanmamış linkler üzerinde işlem yapmak için :link seçicisi kullanılır.
Ziyaret edilen (tıklanan) linkler üzerinde işlem yapmak için ise :visitedseçicisi kullanılır.
/*
* Tıklanmamış a nesnelerini seçip
* arkaplan rengini sarı yapar
*/
a:link {
background-color: yellow
}
/*
* Ziyaret edilmiş a nesnelerini seçip
* arkaplan rengini mor yapar
*/
a:visited {
background-color: purple
}
Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera
7) X + Y (Bitişik Seçici)
X nesnesinden hemen sonra gelen Y nesnesini seçmek için kullanılır.
/*
* ul nesnesinden hemen sonra gelen p nesnesini
* seçer ve yazı rengini kırmızı yapar
*/
ul + p {
color: red
}
Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera
8) X > Y (Çocuk Seçici)
X Y (Torun Seçici) den farklı olarak, X > Y (Çocuk Seçici) doğrudan X nesnesinin içinde bulunan Y çocuk nesnelerini seçmek için kullanılır.
/*
* Sınıfı liste olan ul içinde bulunan
* li çocuk nesnelerini seçip kenarlık ekler
*/
ul.liste > li {
border: 1px solid #ddd
}
Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera
9) X ~ Y
X + Y (Bitişik Seçici)’den farklı olarak bu seçici, X nesnesinden sonra gelen tüm Y (ebeveyn) nesnelerini seçmek için kullanılır.
/*
* ul nesnesinden sonra gelen p (ebeveyn) nesnelerini
* seçer ve renklerini kırmızı yapar
*/
ul ~ p {
color: red
}
Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera
10) X[Y] (Nitelik Seçici)
X nesnesine ait Y niteliği bulunan nesneleri seçmek için kullanılır.
/*
* a nesneleri içerisine title niteliği
* bulunanları seçip rengini kırmızı yapar
*/
a[title] {
color: red
}
Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera
(11~20) Seçicilerine Ulaşmak İçin Tıklayın.
(21~30) Seçicilerine Ulaşmak İçin Tıklayın.
(31~41) Seçicilerine Ulaşmak İçin Tıklayın.