Results 1 to 5 of 5

Thread: pseudo-class help

  1. #1
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Arrow 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!
    Last edited by Snookerman; 04-21-2009 at 06:56 AM. Reason: added "Resolved" prefix

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    It would technically be table *:nth-child(0n+1), but support for nth-child is not good, specifically in IE.
    Last edited by Twey; 10-19-2008 at 05:54 AM. Reason: Oops, minor error...
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    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.

  4. #4
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    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).
    Last edited by Medyman; 10-18-2008 at 10:54 PM.

  5. #5
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Wink

    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.

Tags for this Thread

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
  •