CODEWITHSUNDEEP
csscss-selectors
derBrain
derBrain

Reputation: 183

Use nth-child for a repeating range of table rows

I have a table with, let's say, 20 rows. I know I can use the nth-child css to change the background of the rows, but I don't know how to change the background for a repeating range of rows. For example, I want row 1-3 green, 4-6 white, 7-9 green,etc.. I tried chaining the nth-child, but I can't come up with the correct results. This resembles the table I have:

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

any help is greatly appreciated!!!

Upvotes: 1

Views: 1540

Answers (3)

grinmax
grinmax

Reputation: 1855

Try this

.table tr:nth-child(3n + 1) td:nth-child(odd) {
	background: blue;
}
.table tr:nth-child(3n + 1) td:nth-child(even) {
	background: green;
}
.table tr:nth-child(3n + 1) td:first-child {
	background: red;
}
.table tr:nth-child(3n + 1) + tr td:nth-child(odd) {
	background: orange;
}
.table tr:nth-child(3n + 1) + tr td:nth-child(even) {
	background: black;
}
.table tr:nth-child(3n + 1) + tr + tr td {
	background: yellow;
}
<table border=1 class="table">
<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>
<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>

Upvotes: 0

Marvin
Marvin

Reputation: 14255

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>

Upvotes: 3

ashish singh
ashish singh

Reputation: 6904

tr {
  background-color: red;
}  

tr:nth-child(n+4) {
  background-color: green;
}

tr:nth-child(n+7) {
  background-color: blue;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<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>
</body>
</html>

Upvotes: 2

Related Questions