https://stackoverflow.com/questions/15639247/css-selector-for-nth-range
Say we have a list.
|
1 2 3 4 5 6 7 8 |
<ul class="ex1"> <li>applebees</li> <li>buccaneers</li> <li>camille</li> <li>doloris</li> <li>elliot</li> <li>fudge</li> </ul> |
We want to select all the list items and border it red.
|
1 2 3 |
ul.ex1 li { border: 1px solid red; } |
We want to select all the odd
|
1 2 3 4 5 6 7 8 9 10 |
/* n index 0 1 1 3 2 5 ...so index 1, 3, 5 would be colored in yellow */ ul.ex1 li:nth-child(2n+1) { background-color:yellow; } |
we want to seelct all the evens
|
1 2 3 4 5 6 7 8 9 10 |
/* n index 0 0 1 2 2 4 ...so index 2, 4, 6 would be colored in white */ ul.ex1 li:nth-child(2n) { background-color:white; } |
We want to select ranges.
html
|
1 2 3 4 5 6 7 8 |
<ul class="ex2"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* :nth-child(n+X) all children from the Xth position onward */ /* :nth-child(-n+x) all children up to the Xth position */ ul.ex2 li:nth-child(n+2):nth-child(-n+3) { border: 1px solid purple; } |