Search code examples
csscss-selectorspseudo-class

Can I select the children of a pseudo class in CSS?


I'd like to select all of the child td elements of the second child of a tbody element. Here is the selection I am trying to achieve:

<table>
    <thead></thead>
    <tbody>
        <tr></tr>
        <tr>
            <td>I want to select this td</td>
            <td>And this one</td>
        </tr>
    </tbody>
</table>

tbody:nth-child(2) > td 
{
    //insert rules    
}

However this is not working. Does CSS3 support selecting children of pseudoclasses? If not, any advice on how to achieve the above selection would be greatly appreciated.

Thanks for you input.


Solution

  • tr:nth-child(2) does what you asked for:

    tr:nth-child(2) {
      color: red;
    <table>
      <thead></thead>
      <tbody>
        <tr>
          <td>not me</td>
          <td>And not me</td>
        </tr>
        <tr>
          <td>I want to select this td</td>
          <td>And this one</td>
        </tr>
      </tbody>
    </table>

    tbody:nth-child(2) > td won't work because only <tr> elements can be children of <tbody> elements.