I need an nth child declaration to shade rows of a table in groups of three, two shadings.
So row 1-3 will be white, 4-6 gray, alternating indefinitely.
Help please.
(Note, I know the markup of a normal alternating pattern “tr:nth-child(even) td”)
There’s probably an easier way than this but this works.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
table {
width:500px;
}
td {
border:1px solid #000;
background:blue
}
tr:nth-child(6n+1) td,
tr:nth-child(6n+1) + tr td,
tr:nth-child(6n+1) + tr + tr td{
background:red;
}
</style>
</head>
<body>
<table>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr> <tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
This is a little more concise:)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
table {
width:500px;
}
td {
border:1px solid #000;
background:blue
}
tr:nth-child(6n+1) td,
tr:nth-child(6n+2) td,
tr:nth-child(6n+3) td{
background:red;
}
</style>
</head>
<body>
<table>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr> <tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
I don’t know about easier, or concise, but here it is:
<!doctype html>
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing page</title>
<style type="text/css">
tr:nth-of-type(even):nth-of-type(3n+1),
tr:nth-of-type(even):nth-of-type(3n+3)
{
background:red;
}
tr:nth-of-type(odd):nth-of-type(3n+2)
{
background:red;
}
tr:nth-of-type(odd):nth-of-type(3n+1),
tr:nth-of-type(odd):nth-of-type(3n+3)
{
background:blue;
}
tr:nth-of-type(even):nth-of-type(3n+2)
{
background:blue;
}
</style>
</head><body>
<table>
<tr>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
</tr> <tr>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
</tr> <tr>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
</tr> <tr>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
</tr>
</table>
</body></html>
This code pegs the rows exactly the way the user wishes, ((1,3,2), (4,6,5), (7,9,8)… ) and applies the background color exactly and precisely for those three grouped rows. It’s a “one step”, not a “two step”. By a “two step” I mean the global background color set, and then, as a second step, a correction in background color for a number of elements.
Notice the order (1,3,2) that outlines the CSS selectors used, selectors I kept in separate rules for understanding the way it works. In the end, there should be only two rules: one for red, one for blue, having three selectors each.
I’ve used nth-of-type since it makes more sense to me.
Nice solutions, guys.
noonnope, why not just summarize that to
tr {background:red;}
tr:nth-of-type(odd):nth-of-type(3n+1),
tr:nth-of-type(odd):nth-of-type(3n+3),
tr:nth-of-type(even):nth-of-type(3n+2)
{background:blue;}
Edit: oops, you did pretty much cover that in your last comment (except maybe the ‘three selectors each’). Sorry!
Hey ralph,
I didn’t use a global rule for declaring the background
tr {background:red;}
because I wanted, as I said, a strict and precise selection of elements in applying the background. As opposed to a two step, where the second step involves a correction for background settings made in the first step.
Thanks guys. I mixed in a class declaration so I can label explicitly which tables get striped this way.
table.group3 tr:nth-of-type(odd):nth-of-type(3n+1) td,
table.group3 tr:nth-of-type(odd):nth-of-type(3n+3) td,
table.group3 tr:nth-of-type(even):nth-of-type(3n+2) td {
background: #ddd;
}
In my schema the base color (#fff) is universal to all tables.
Glad you find it useful.
I would lose the table prefix, the td suffix, and put order in selectors, since they aren’t in a demo for explaining anymore.
.group3 tr:nth-of-type(odd):nth-of-type(3n+1),
.group3 tr:nth-of-type(even):nth-of-type(3n+2),
.group3 tr:nth-of-type(odd):nth-of-type(3n+3) {
background: #ddd;
}