wybierz ostatnie 3 dziecko

Question

Wiem, że możesz wybrać ostatni chłód z :last-child. Teraz trzeba wybrać ostatnie 3 Childs jedynym problemem jest ilość Childs nie wiem więc nie mogę używać :nth-child, wiem, że jest coś, co się nazywa :nth-last-child ale nie mogę naprawdę zrozumieć, jak to działa

<div id="something"> 

    <a href="images/x.jpg" ><a/> 
    <a href="images/x.jpg" ><a/> 
    <!-- here some more 

    and than i need to select these --> 
    <a href="images/x.jpg" ><a/> 
    <a href="images/x.jpg" ><a/> 
    <a href="images/x.jpg" ><a/> 

</div> 

więc teraz muszę pewne rzeczy tak:

#something a:last-child{ 
    /* only now it needs to select 2 more a's that are before this child */ 
} 

Answer 1

Możesz przeczytać więcej here o n-ostatniego dziecka, ale to powinno w zasadzie rade wyboru ostatnie 3 dzieci z tylko CSS

#something a:nth-last-child(-n+3) { 
    /*declarations*/ 
} 

fiddle demonstracja od Fabricio matowy

ten wybierze tylko te wiersze zwracające liczbę dodatnią dla wyrażenia N (-n + 3), a ponieważ używamy n-tego-ostatniego-dziecka, to odliczanie od ostatniego do pierwszego, , więc pierwsze wiersze od dołu daje,

f(n) = -n+3 
f(1) = -1+3 = 2 <- first row from the bottom 
f(2) = -2+3 = 1 <- second row from the bottom 
f(3) = -3+3 = 0 <- third row from the bottom 

wszystko wróci ujemną liczbę

Answer 2

jest to możliwe z selektorów CSS3 i formulas:

.something a:nth-last-child(-n+3) { ... } 

Możesz także wypróbować using jQuery (example) lub dodać konkretną klasę do ostatnich trzech elementów kodu po stronie serwera (nie wymaga JavaScript do włączenia w przeglądarkach, a także działa na starszych przeglądarkach, które nie obsługują CSS3).