Nth-Child to Alternate by 2 Rows

How to use :nth-child for alternate rows

You are almost there. you need to use :nth-child(even) to style even rows and :nth-child(odd) to style odd rows. For the further reference you can go through nth-child() Selector

Here is a small demo

div:nth-child(odd) {  height: 100px;  width: 100px;  background: yellow;  margin: 20px auto;}
div:nth-child(even) {  height: 100px;  width: 100px;  background: green;  border-top: 5px solid black;  border-bottom: 5px solid red;  margin: 20px auto;}

<div>odd</div><div>even</div><div>odd</div><div>even</div>

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

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.

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>

Alternate row colours from 2nd row of the table using CSS

You can used nth-child() css selector to chose odd and even. Then skip 2nd row by nth-child(2) selector.

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: green}
tr:nth-child(1) {
background:none;}

<table>
  <tbody>
    <tr>
      <th>col 1</th>
      <th>col 2</th>
    </tr>
    <tr>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>21</td>
      <td>22</td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
    </tr>
     <tr>
      <td>31</td>
      <td>32</td>
    </tr>
     <tr>
      <td>31</td>
      <td>32</td>
    </tr>
  </tbody>
</table>

Alternating row colours with nth-child and nth-of-type

Is there any reason not to use multiple <tbody>s?

Grouping rows can make it easy.

table {  border-collapse: collapse;  width: 100%;}
td {  border: 1px solid #eee;  padding: 10px;}
tbody:nth-child(odd) > tr { /* odd child */  background-color: #f2c4fa;}
tbody:nth-child(odd) > tr:nth-child(1) { /* odd parent */  background-color: #eb94fa;}
tbody:nth-child(even) > tr { /* even child */  background-color: #d8bbfd;}
tbody:nth-child(even) > tr:nth-child(1) { /* even parent */  background-color: #c294fa;}

<table>  <tbody>    <tr>      <td>Parent A</td>    </tr>    <tr>      <td>A1</td>    </tr>    <tr>      <td>A2</td>    </tr>  </tbody>  <tbody>    <tr>      <td>Parent B</td>    </tr>  </tbody>  <tbody>    <tr>      <td>Parent C</td>    </tr>    <tr>      <td>C1</td>    </tr>    <tr>      <td>C2</td>    </tr>  </tbody>  <tbody>    <tr>      <td>Parent D</td>    </tr>    <tr>      <td>D1</td>    </tr>    <tr>      <td>D2</td>    </tr>  </tbody></table>

Alternate style with nth-child

Try changing your odd and even styles to:

.container .bubble:nth-child(2n) {
    background-color: #4a94ed;
    border-color: #4a64ed;
}

.container .bubble:nth-child(4n) {
    background-color: #4df200;
    border-color: #00f23d;
}

Working example: http://codepen.io/JasonGraham/pen/VjYYXd

nth-child: how to pick elements in groups of two

You can select every fourth td along with its immediately preceding sibling with nth-child(4n) and nth-child(4n - 1):

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

 <div class="fc-slats">  <table>    <tbody>      <tr>        <td class="fc-widget-content fc-major">16</td>        <td class="fc-widget-content fc-minor">16</td>        <td class="fc-widget-content fc-major">17</td>        <td class="fc-widget-content fc-major">17</td>        <td class="fc-widget-content fc-major">18</td>        <td class="fc-widget-content fc-minor">18</td>      </tr>    </tbody>  </table>  </div>