How Does: Nth-Child(N+4):Nth-Child(-N+8) Select a Range of Elements

Apply CSS in nth-child to nth-child

This is what you want?

In this first css -n+5 selecting first five elements before 5th element because of negetive. If you remove negetive it will select all elements with 5th elements. Therefore again added n+11 for elements 11 to 15.

You can use .second css if you don't want to add css after 15th element.

.first p:nth-child(-n+5) {  color: green;}
.first p:nth-child(n + 5) {  color: orange;}
.first p:nth-child(n + 11) {  color: red;}
.second {  margin-top: 50px;}
.second p:nth-child(-n+5) {  color: green;}
.second p:nth-child(n + 6):nth-child(-n + 10) {  color: orange;}
.second p:nth-child(n + 11):nth-child(-n + 15) {  color: red;}

<div class="first">  <p>Student 1</p>  <p>Student 2</p>  <p>Student 3</p>  <p>Student 4</p>  <p>Student 5</p>  <p>Student 6</p>  <p>Student 7</p>  <p>Student 8</p>  <p>Student 9</p>  <p>Student 10</p>  <p>Student 11</p>  <p>Student 12</p>  <p>Student 13</p>  <p>Student 14</p>  <p>Student 15</p></div>
<div class="second">  <p>Student 1</p>  <p>Student 2</p>  <p>Student 3</p>  <p>Student 4</p>  <p>Student 5</p>  <p>Student 6</p>  <p>Student 7</p>  <p>Student 8</p>  <p>Student 9</p>  <p>Student 10</p>  <p>Student 11</p>  <p>Student 12</p>  <p>Student 13</p>  <p>Student 14</p>  <p>Student 15</p>  <p>Student 16</p>  <p>Student 17</p></div>

CSS Selector for nth range?

You won't be able to do this with a single :nth-child() — you'll need to chain at least one other such pseudo-class. For example, a combination of :nth-child() and :nth-last-child() (the n+2 bit means start counting forward and backward respectively from the 2nd child):

.myTableRow td:nth-child(n+2):nth-last-child(n+2){
background-color: #FFFFCC;
}

Alternatively, instead of making use of a formula, simply exclude :first-child and :last-child:

.myTableRow td:not(:first-child):not(:last-child){
background-color: #FFFFCC;
}

CSS nth-child - get 1st, 2nd, 4th and 5th children at once?

If you want to be explicit, one way is to repeat :nth-child() like so:

tr:nth-child(1), tr:nth-child(2), tr:nth-child(4), tr:nth-child(5)

Alternately, since the table happens to have exactly 5 rows, you can just exclude the third row and you'll get rows #1, #2, #4 and #5:

tr:not(:nth-child(3))

jsFiddle preview

How to select a range of elements in repeated pattern

This is a commonly-asked question, but I wanted to point out that the reason :nth-child(n+4):nth-child(-n+6) only matches one specific range of elements is that it only provides a single start point (n+4) and a single end point (-n+6). The only elements that can be greater than or equal to 4 and less than or equal to 6 are 4, 5 and 6, so it's impossible to match elements outside of this range using the same selector. Adding more :nth-child() pseudos will only narrow down the matches.

The solution is to think of this in terms of columns, assuming there will always be exactly 3 columns (elements) per row. You have three columns, so you will need three separate :nth-child() pseudos. Elements 4 and 10 from the first column are 6 elements apart, so the argument to all of the :nth-child() pseudos needs to start with 6n.

The +b portion in the An+B expression can either be +4, +5 and +6, or 0, -1 and -2 — they will both match the same set of elements:

li:nth-child(6n+4), li:nth-child(6n+5), li:nth-child(6n+6)
li:nth-child(6n), li:nth-child(6n-1), li:nth-child(6n-2)

You cannot do this with a single :nth-child() pseudo-class, or a single compound selector consisting of any combination of :nth-child() pseudos, because the An+B notation simply doesn't allow such expressions to be constructed that match elements in ranges as described.

How do I select every other even child and adjacent child?

You could solve this with :nth-child using two formulas, one for the even numbers and one for the even ones. This is a working example of my suggestion:

<style>
    li:nth-child(4n - 2), li:nth-child(4n - 1) { color: red; }
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

The 4n part provides the "every other even/odd" part you're looking for: it will select one every 4 items. The -1 and -2 offset this interval to match the numbers you want. You could get the inverse behaviour (select 1, 4, 5, 8, 9, etc) when using offsets +1 and 0

:nth-child(2) doesn't work. :nth-child(1) and :nth-child(3) do

Here is an explanation of what went wrong. It was the result of your selector. The oddity in the way it played out was due to your html structure, and using querySelector.

div.rules :nth-child()

This will first target the <div class="rules"> element. Then, it will look for all elements which are the nth-child inside of that div because of the space between the two selectors. Following that, using querySelector will select the first element of the matched set.

This is why you ended up getting the first <div> with :nth-child(1), because it in fact matched every single nth-child(1), but taking the first result was coincidentally the element you expected.

However, :nth-child(2) matching every second child element was far too wide of a net, and ended up getting the second child in the first div, and since that was the first result, that was where the red background showed up.

The final curiosity of :nth-child(3) seeming to actually hit the proper element was only because there is only one third child element in all of that html, and it was the one which you expected, although as explained for reasons other than assumed.

select multiple child in css

You can separate the classes with a comma ,

.ListTaskTime tbody tr >td:nth-child(3), 
.ListTaskTime tbody tr >td:nth-child(6),
.ListTaskTime tbody tr >td:nth-child(9) {
    /* Common Styles Goes Here, Styles will apply to child 3,6 and 9 */
}

Note: You need to check the nth-child and define it manually in your stylesheet, as CSS cannot decide it for you if columns increase.

If you are using a server side language for generating a dynamic table, you can use functions like substr() to cut down the letters.

Side note : You don't have to use > unless and until you don't have any child table, this is sufficient.. tbody tr td:nth-child(3)