-
pseudo-class help
I have a table with three rows and I need to address the second row only. I cannot change the table in any way, I can only use css to address it. Does anyone know how I can use pseudo-classes (http://www.w3.org/TR/2001/CR-css3-se...ctural-pseudos) to address the second row only, or every other row would work as well since I only have three rows. The table roughly looks like this:
Code:
<table>
<tbody>
<tr>
<td></td><!-- first row, I don't care weather it's addressed or not --->
</tr>
<tr>
<td></td><!-- second row, I want to address this one --->
</tr>
<tr>
<td></td><!-- third row, I don't want this one to be addressed --->
</tr>
</tbody>
</table>
I'm new to pseudo-classes and I've been trying it for a while but I can't get it to work. I test my results in FF3 and IE. Please help me, thanks!
-
It would technically be table *:nth-child(0n+1), but support for nth-child is not good, specifically in IE.
-
Thanks, but it still doesn't work. I tried it with most major browsers but none of them worked. I tried table:nth-child(0n+1), table:nth-child(2n+1), tbody:nth-child(0n+1), tbody:nth-child(2n+1), etc. I enjoyed your "beware of xhtml" article though.
-
Code:
table :nth-child(2) {
display:none;
}
That will hide the 2nd child (row) of the table element. As Twey mentioned, IE has no support for nth-child selectors. Safari and Opera support these in their latest releases. Firefox 3.1 also supports this but this is still in public beta. In any case, it's still very limited for any important usage. In other words, you should have a backup if whatever is in that second row really shouldn't be seen. I find the entire premise of you just having control over the CSS to be suspect but that's another issue.
There might be a javascript based solution. I'm not one to ask about that. Perhaps, someone else might chime in on that front or you could try posting in the JS forum. It's still not 100% accessible but I would guess that more people have javascript capable browsers than the newest versions of Opera, Safari and Firefox (beta version no less).
-
Thanks for your help. The second row contains a non-breaking space. The file I'm trying to alter is a school lunch menu that is updated every week and it is the same for many schools, so I cannot change it, I just put it in an iframe on the website of the school I'm a webmaster for. Since the designer has asked me to change the layout of the page I managed to redirect the css link to my own .css file. I did that by just adding it to the link (/MenuViewPage.aspx?blablabla&Style="><link title="mycssfile" rel="stylesheet" type="text/css" href="http://www.website.se/style/mycssfile). Therefore I only have access to the .css file. Since the second row of the table contains a non-breaking space (probably because the inexperienced writer needed a space and that was the best he/she could do), I get a space that I don't need and also a scrollbar. Hope that clears all suspicion.
