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")
| SitePoint Sponsor |
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.
Code:<!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>
www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
Ultimate CSS Reference
Check out SitePoint's latest JavaScript challenge
This is a little more concise
Code:<!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>
www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
Ultimate CSS Reference
Check out SitePoint's latest JavaScript challenge
I don't know about easier, or concise, but here it is:
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.Code:<!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>
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
Edit: oops, you did pretty much cover that in your last comment (except maybe the 'three selectors each'). Sorry!Code: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;}
Hey ralph,
I didn't use a global rule for declaring the background
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.Code:tr {background:red;}
Thanks guys. I mixed in a class declaration so I can label explicitly which tables get striped this way.
Code css: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.
Code:.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; }
Posting Permissions
Reply With Quote
Bookmarks