CSS of specific table row

Question

I have a table as this one:

<table id="someID">
<tr><td>example text</td></tr>
<tr><td>example text</td><td>example text</td></tr>
<tr><td>example text</td></tr>
<tr><td>example text</td><td>example text</td></tr>
</table>

And I want to hide the second and the third row in the table using only CSS. This table is predefined so I cannot use id or class tags to specify which row to style, I'm looking for some solution that targets the specific rows.

If this can be done with CSS can someone tell me how to do this.

Answer 1

Here is the Solution.

The HTML:

<table id="someID">
    <tr><td>example text</td></tr>
    <tr><td>example text</td><td>example text</td></tr>
    <tr><td>example text</td></tr>
    <tr><td>example text</td><td>example text</td></tr>
</table>

The CSS:

table tr:nth-child(2) {display : none;}
table tr:nth-child(3) {display : none;}

You have to use :nth-child() to hide the rows that you desire.

As most of the :nth-child() will not work for older browsers, here is the Solution for them.

The HTML:

<table id="someID">
    <tr><td>example text</td></tr>
    <tr><td>example text</td><td>example text</td></tr>
    <tr><td>example text</td></tr>
    <tr><td>example text</td><td>example text</td></tr>
</table>

The CSS:

table tr:FIRST-CHILD + tr {
    display:none;
}

table tr:FIRST-CHILD + tr + tr {
    display:none;
}

Hope this helps now.

Answer 2

You can do it using CSS3 CSS

#someID tr:nth-child(2){display:none;}
#someID tr:nth-child(3){display:none;}