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

CSS Seçicileri(Selector)-2 sayfasına ulaşmak için tıklayın

CSS Seçicileri(Selector)-4 sayfasına ulaşmak için tıklayın



Kimler Neler Demiş?

avatar
  Subscribe  
Bildir