SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: Nth child help.

  1. #1
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,036
    Mentioned
    65 Post(s)
    Tagged
    0 Thread(s)

    Nth child help.

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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
            <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>    <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
    </body>
    </html>

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
            <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>    <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
    </body>
    </html>

  4. #4
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know about easier, or concise, but here it is:

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

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,221
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Nice solutions, guys.

    noonnope, why not just summarize that to

    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;}
    Edit: oops, you did pretty much cover that in your last comment (except maybe the 'three selectors each'). Sorry!

  6. #6
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey ralph,

    I didn't use a global rule for declaring the background

    Code:
    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.

  7. #7
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,036
    Mentioned
    65 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •