CSS Selector for Nth Range

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;
}

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 nth-child for a range of elements

You just need to change .div to div (it's an element, not a class).

See here: http://jsfiddle.net/sQCCA/

Use nth-child for a repeating range of table rows

You can use formulas in nth-child:

tr:nth-child(6n+1), tr:nth-child(6n+2), tr:nth-child(6n+3) {
    background-color: green;
}

This will select every 6th child and the two subsequent ones (means: always the first three out of six).

Tailored to your example:

tr:nth-child(6n+1), tr:nth-child(6n+2), tr:nth-child(6n+3) { background-color: green;}

<table border=1><tr>    <td width='30px' rowspan='3'>1</td>    <td width='150px'>1</td>    <td width='150px'>1</td></tr><tr>    <td width='150px'>2</td>    <td width='150px'>2</td></tr><tr class='trContacts'>    <td colspan='3'>3</td></tr><tr>    <td width='30px' rowspan='3'>4</td>    <td width='150px'>4</td>    <td width='150px'>4</td></tr><tr>    <td width='150px'>5</td>    <td width='150px'>5</td></tr><tr class='trContacts'>    <td colspan='3'>6</td></tr><tr>    <td width='30px' rowspan='3'>7</td>    <td width='150px'>7</td>    <td width='150px'>7</td></tr><tr>    <td width='150px'>8</td>    <td width='150px'>8</td></tr><tr class='trContacts'>    <td colspan='3'>9</td></tr><tr>    <td width='30px' rowspan='3'>10</td>    <td width='150px'>10</td>    <td width='150px'>10</td></tr><tr>    <td width='150px'>11</td>    <td width='150px'>11</td></tr><tr class='trContacts'>    <td colspan='3'>12</td></tr></table>

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.

CSS nth-child for greater than and less than

:nth-child() doesn't work on classes, it looks for the element itself. You'd need to wrap the .container divs by a wrapper and use the following:

.wrapper div:nth-child(n+3) {
   /* put your styles here... */
}

<div class="wrapper">
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
</div>

Working Demo.

Clarifying on `:nth-child()`

Using .container:nth-child(n+3) may or may not work. Because, :nth-child() pseudo-class represents nth child element matching the selector (.container in this case).

If the .container element isn't the nth-child of its parent, it won't be selected.

From the Spec:

The :nth-child(an+b) pseudo-class notation represents an element
that has an+b-1 siblings before it in the document tree, for any
positive integer or zero value of n, and has a parent element.

Consider this example:

<div class="parent">
    <div>1st</div>
    <div>2nd</div>
    <div>3rd</div>
    <div class="container">4th</div>
    <div class="container">5th</div>
    <div class="container">6th</div>
    <div>7th</div>
    <div class="container">8th</div>
    <div>9th</div>
</div>

In this case, .container:nth-child(2) won't select the 2nd div.container element (which has 5th content). Because that element is not the 2nd child of its parent, in parent's children tree.

Also, .container:nth-child(n+3) will select all the div.container elements because n starts from 0 for the first element in the parent's children tree, and the first div.container is the 4th child of its parent.

n starts from 0

n = 0: (0 + 3) = 3 => 3rd element
n = 1: (1 + 3) = 4 => 4th element
n = 2: (2 + 3) = 5 => 5th element
...

Hence div.container:nth-child(n+3) represents all the 3rd, 4th, 5th, ... child elements matching div.container selector.

Online Demo.

How to select all items in even rows using css nth-child(formula)

 :nth-child(6n + 4)
 :nth-child(6n + 5)
 :nth-child(6n + 6)

CSS Selector for Nth Range