Question

I’ve got a table

<table id="mytable">
    <tr style="display: none;"><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr style="display: none;"><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
 </table>

I’m trying to set the table striping to use nth-child selectors but just can’t seem to crack it.

 table #mytable tr[@display=block]:nth-child(odd) { 
      background-color:  #000;  
 }
 table #mytable tr[@display=block]:nth-child(odd) { 
      background-color:  #FFF;
 }

I’m pretty sure I’m close … can’t quite seem to crack it.

anyone pass along a clue?

Answer 1

Here’s as close as you’re going to get. Note that you can’t make the nth-child count only displayed rows; nth-child will take the nth child element no matter what, not the nth child that matches a given selector. If you want some rows to be missing and not affect the zebra-striping, you will have to remove them from the table entirely, either through the DOM or on the server side.

#mytable tr:nth-child(odd) {
  background-color: #000;
}

#mytable tr:nth-child(even) {
  background-color: #FFF;
}

<table id="mytable">
  <tr><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td></tr>
</table>

Here are the fixes that I made:

 table #mytable tr[@display=block]:nth-child(odd) { 
      background-color:  #000;  
 }

There’s no need to specify an ancestor selector for an id based selector; there is only ever one element that will match #table, so you’re just adding extra code by adding the table in.

 #mytable tr[@display=block]:nth-child(odd) { 
      background-color:  #000;  
 }

Now, [@display=block] would match elements which had an attribute display set to block, such as <tr display=block>. Display isn’t a valid HTML attribute; what you seem to be trying to do is to have the selector match on the style of the element, but you can’t do that in CSS, since the browser needs to apply the styles from the CSS before it can figure that out, which it’s in the process of doing when it’s applying this selector. So, you won’t be able to select on whether table rows are displayed. Since nth-child can only take the nth child no matter what, not nth with some attribute, we’re going to have to give up on this part of the CSS. There is also nth-of-type, which selects the nth child of the same element type, but that’s all you can do.

 #mytable tr:nth-child(odd) { 
      background-color:  #000;  
 }

And there you have it.