CSS Seçiciler(Selector)-3
21) X:NTH-CHİLD(N) Seçicisi 
X nesnesi içerisinde N’i seçer.
/*
* li nesnesi içerisindeki 3'leri seçerek rengini mavi yapar.
*/
ul li:nth-child(3) {
color: blue
}
22) X:NTH-LAST-CHİLD(N) Seçicisi
X nesnesi içerisinde sondan N’i seçer.
/*
* li nesneleri içinde sondan 1'nin rengini kırmızı yapar.
*/
ul li:nth-last-child(2) {
color: red
}
23) X:NTH-OF-TYPE(N) Seçicisi
X nesnesindeki N’i seçer.
/*
* Div içerisinde bulunan 3. spanları mavi yapar.
*/
div span:nth-of-type(3){
color: blue
}
24) X:NTH-LAST-OF-TYPE(N) Seçicisi
:nth-of-type ile aynı işlevde kullanılır. Tek farkı sondan başlayarak nesneleri seçer.
/*
* Div içerisinde bulunan sondan 1 sıradaki spanları mavi yapar.
*/
div span:nth-last-of-type(2){
color: blue
}
25) X:ONLY-CHİLD Seçicisi
X nesnesi sadece tek olanları seçer. Onun dışında farklı bir nesneyi asla seçmez.
/*
* Div içerisinde tek bir p etiketi varsa onu seçer ve arka plan rengini turuncu yapar.
*/
div p:only-child {
background-color: orange
}
26) X:ONLY-OF-TYPE Seçicisi
X nesnesi sadece tek olan nesneleri seçer. Farklı nesnelerin olması sonucu etkilemez. X:ONLY-CHİLD seçicisinden farklı olarak farklı nesneler sonucu etkilemez.
/*
* Div içerisinde tek bir p etiketi varsa onu seçer ve arka plan rengini turuncu yapar.
*/
div p:only-of-type {
background-color: orange
}
27) X:FİRST-CHİLD Seçicisi
İlk X nesnesini seçmek için bu öge kullanılır.
/*
* İlk li nesnesinin rengini mavi yapar.
*/
ul li:first-child {
color: blue
}
28) X:FİRST-CHİLD Seçicisi
Son X nesnesini seçmek için bu öge kullanılır.
/*
* Son li nesnesinin rengini mavi yapar.
*/
ul li:last-child {
color: blue
}
29) X:FİRST-OF-TYPE Seçicisi
İlk X nesnesini seçer.. :first-child seçicisinden farklı olarak, tipi eşleşen ilk nesne seçilir.
/*
* Divler içinde ilk p nesnesini seçer ve rengini mavi yapar.
*/
div p:first-of-type {
color: blue
}
30) X:LAST-OF-TYPE Seçicisi
Son X nesnesini seçmek için kullanılır. :last-child seçicisinden farkı tipi eşleşen son nesneyi seçmesidir.
/*
* Divler içinde ilk p nesnesini seçer ve rengini mavi yapar.
*/
div p:last-of-type {
color: blue
}
Benzer Konular:
CSS Seçicileri(Selector)-1 sayfasına ulaşmak için tıklayın