SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    second child: supported/or not supported?

    There's two THs in a table: <tr><th></th></tr><tr><th></th></tr>. I'm playing around to see whether I can use the second-child to style the second th but it appear doesn't work. I'm wondering if I applied wrong syntax, below is two "second child" methods I tried out:

    Code:
    tr:nth-child(2) th {
    }
    
    tr:second-child th {
    }
    
    th:second-child {
    }
    Thanks,

    jace

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Support for nth child is virtually non-existant and i think only Konqueror supports it.

    http://dev.l-c-n.com/CSS3-selectors/browser-support.php


    :second-child isn't even css (yet) so no-one supports it.

    also:
    There's two THs in a table: <tr><th></th></tr><tr><th></th></tr>.
    There doesn't seem to be a th that is a second child of a tr. There are only single childs in the tr. The second tr would be the the second child of a table so the target would be.

    table:nth-child(2) th

    That's just what I would guess as I have no way of testing this.

    I would assume that for your code to work the structure of the table would be like this.
    Code:
    tr:nth-child(2) {background:red}
    Code:
    <table>
    <tr>
    <th>test1</th>
    <th>test2</th>
    </tr>
    </table>
    That would make the th a second child of the tr according to my calculations But again thats untested and just the way I thought it might work but I may be wide of the mark. (I usually gain an understanding of css by trying things and seeing the result as cold hard facts do nothing for me )

    I supose you could use the adjacent selector which has support in opera and mozilla to select a second item in a structure like this.

    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=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    th{background:white}
    tr + tr th{background:red}
    tr + tr + tr th{background:white}
    </style>
    </head>
    <body>
    <table>
    <tr>
    <th>test1 white</th>
    </tr>
    <tr>
    <th>test2 red</th>
    </tr>
    <tr>
    <th>test3 white</th>
    </tr>
    <tr>
    <th>test4 white</th>
    </tr>
    </table>
    </body>
    </html>


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
  •