Le bloc-notes professionnel d'un développeur front-end senior
Source : Demo jsFiddle.net.
.myClass:nth-last-child(-n+4){} nous donne en jQuery :
|
1 2 |
var myVariable = 4; $('.myClass:nth-last-child(-n+'+myVariable+')').doSomething(); |
|
1 2 3 4 |
(function(){ var getColumnsCount = $('.container').attr('data-columns'); $('.list .item:nth-last-child(-n+'+getColumnsCount+')').addClass('emphasis'); })(); |
Source : Styling elements based on sibling count
Deux possibilités (sachant que dans certains cas l’une conviendra mieux que l’autre) :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/* one item */ li:nth-child(1):nth-last-child(1) { width: 100%; } /* two items */ li:nth-child(1):nth-last-child(2), li:nth-child(2):nth-last-child(1) { width: 50%; } /* three items */ li:nth-child(1):nth-last-child(3), li:nth-child(2):nth-last-child(2), li:nth-child(3):nth-last-child(1) { width: 33.3333%; } /* four items */ li:nth-child(1):nth-last-child(4), li:nth-child(2):nth-last-child(3), li:nth-child(3):nth-last-child(2), li:nth-child(4):nth-last-child(1) { width: 25%; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* one item */ li:first-child:nth-last-child(1) { width: 100%; } /* two items */ li:first-child:nth-last-child(2), li:first-child:nth-last-child(2) ~ li { width: 50%; } /* three items */ li:first-child:nth-last-child(3), li:first-child:nth-last-child(3) ~ li { width: 33.3333%; } /* four items */ li:first-child:nth-last-child(4), li:first-child:nth-last-child(4) ~ li { width: 25%; } |
ul li:nth-last-child(-n + 2) {
/* .. */
}
Source et support navigateur (IE9+ pour IE) : http://css-tricks.com/almanac/selectors/n/nth-last-child/