Nth-Child for Every Two Table Rows

nth-child for every two table rows

Realize that you are doing groups of 4, then you can see that you can have every 4th element and every 4th element minus one being white, then every 4th element minus two, or every 4th element minus 3 being grey.

So, you'd use 4n and 4n-1, then 4n-2 and 4n-3:

div:nth-child(4n), div:nth-child(4n-1) {
    background: red;
}
div:nth-child(4n-2), div:nth-child(4n-3) {
    background: blue;
}

That code isn't precise to your case, I wrote it for a jsFiddle proof-of-concept.

NB disclaimer: Keep in mind that nth-child does not work in IE8. Typical issue, of course.

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>

Modifying nth child for table cells

You can either apply the .Date background on tr:nth-child(odd) or tr:not(:nth-child(even))

.TabSymbols tr:nth-child(even) { background-color: #f2f2f2; }/*.TabSymbols tr:nth-child(odd) .Date { background: #666; color: #fff; }*/.TabSymbols tr:not(:nth-child(even)) .Date { background: #666; color: #fff; }

<table class="TabSymbols">  <tr>    <td class="Date">foo</td>    <td>foo</td>    <td>foo</td>    <td>foo</td>  </tr>  <tr>    <td>foo</td>    <td>foo</td>    <td class="Date">foo</td>    <td class="Date">foo</td>  </tr>  <tr>    <td>foo</td>    <td>foo</td>    <td class="Date">foo</td>    <td>foo</td>  </tr>  <tr>    <td>foo</td>    <td class="Date">foo</td>    <td>foo</td>    <td>foo</td>  </tr></table>

How to call two nth-child in a table?

To select cells that are both at the first column and after the 2nd row, use the CSS selector:

tr:nth-child(n+3) td:nth-child(1)

jQuery:

$("tr:nth-child(n+3) td:nth-child(1)").addClass("ClassName");

Your fiddle, updated: http://jsfiddle.net/CnUw6/1/

nth-child doesnt apply background-color correctly in the table

If you want to add background-color for every 2nd child (every even child: 2, 4, 6...), you need to use nth-child(even)

Check out this snippet of even, odd selectors.

How to use nth-child for styling with a table with rowspan?

Unfortunately, there's no way to do this with :nth-child() alone, or by using CSS selectors alone for that matter. This has to do with the nature of :nth-child() which selects purely based on an element being the nth child of its parent, as well as with CSS's lack of a parent selector (you can't select a tr only if it doesn't contain a td[rowspan], for example).

jQuery does have the :has() selector that CSS lacks, though, which you can use in conjunction with :even (not :odd as it's 0-indexed versus :nth-child()'s 1-index) for filtering as an alternative to CSS:

$('tr:not(:has(td[rowspan])):even')

jsFiddle preview

Using nth-child to alternate colors in a table except for selected groups of TRs

The only solution I can find is to break each section into separate tbody elements and apply the alternate class to the ones with the required styling.

The rows would not completely alternate as the number of rows would, I presume not be known in advance...but it's close.

.alternate-row-colors tr:nth-child(odd) {  background: #bada55;}.alternate-row-colors tr:nth-child(even) {  background: gold;}

<table>  <TBODY class="alternate-row-colors">    <TR>      <TD>Monday</TD>      <TD>09/11/2000</TD>      <TD>Kelsey</TD>    </TR>    <TR>      <TD>Tuesday</TD>      <TD>09/12/2000</TD>      <TD>Lindsey</TD>    </TR>    <TR>      <TD>Wednesday</TD>      <TD>09/13/2000</TD>      <TD>Randy</TD>    </TR>    <TR>      <TD>Thursday</TD>      <TD>09/14/2000</TD>      <TD>Susan</TD>    </TR>    <TR>      <TD>Friday</TD>      <TD>09/15/2000</TD>      <TD>Randy</TD>    </TR>    <TR>      <TD>Saturday</TD>      <TD>09/16/2000</TD>      <TD>Lindsey</TD>    </TR>    <TR>      <TD>Sunday</TD>      <TD>09/17/2000</TD>      <TD>Susan</TD>    </TR>  </TBODY>  <TBODY>    <TR>      <TD>Monday</TD>      <TD>09/18/2000</TD>      <TD>Melody</TD>    </TR>    <TR>      <TD>Tuesday</TD>      <TD>09/19/2000</TD>      <TD>Christiane</TD>    </TR>    <TR>      <TD>Wednesday</TD>      <TD>09/20/2000</TD>      <TD>Symphony</TD>    </TR>    <TR>      <TD>Thursday</TD>      <TD>09/21/2000</TD>      <TD>Starflower</TD>    </TR>    <TR>      <TD>Friday</TD>      <TD>09/22/2000</TD>      <TD>Miko</TD>    </TR>    <TR>      <TD>Saturday</TD>      <TD>09/23/2000</TD>      <TD>Cleo</TD>    </TR>    <TR>      <TD>Sunday</TD>      <TD>09/24/2000</TD>      <TD>Alyx</TD>    </TR>  </TBODY>  <TBODY class="alternate-row-colors">    <TR>      <TD>Monday</TD>      <TD>09/25/2000</TD>      <TD>Dancing Star</TD>    </TR>    <TR>      <TD>Tuesday</TD>      <TD>09/26/2000</TD>      <TD>Dawn</TD>    </TR>    <TR>      <TD>Wednesday</TD>      <TD>09/27/2000</TD>      <TD>Josh</TD>    </TR>    <TR>      <TD>Thursday</TD>      <TD>09/28/2000</TD>      <TD>Ryan</TD>    </TR>    <TR>      <TD>Friday</TD>      <TD>09/29/2000</TD>      <TD>Mary Kay</TD>    </TR>    <TR>      <TD>Saturday</TD>      <TD>09/30/2000</TD>      <TD>Hallie</TD>    </TR>    <TR>      <TD>Sunday</TD>      <TD>10/01/2000</TD>      <TD>Paul</TD>    </TR>  </TBODY></table>

How to alternate by rows and 2 rows using CSS

check it out please. its the exact solution what your are looking for.

.table1 tr:nth-child(2n){  background: red}
.table2 tr:nth-child(4n), .table2 tr:nth-child(4n-1){  background: green;  color: white;}

<table class="table1">  <tr><td>one</td></tr>  <tr><td>two</td></tr>  <tr><td>three</td></tr>  <tr><td>four</td></tr>  <tr><td>five</td></tr>  <tr><td>six</td></tr>  <tr><td>seven</td></tr>  <tr><td>eight</td></tr></table>
<table class="table2">  <tr><td>one</td></tr>  <tr><td>two</td></tr>  <tr><td>three</td></tr>  <tr><td>four</td></tr>  <tr><td>five</td></tr>  <tr><td>six</td></tr>  <tr><td>seven</td></tr>  <tr><td>eight</td></tr></table>

Nth-Child for Every Two Table Rows