Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    May 2009
    Posts
    32
    Thanks
    4
    Thanked 0 Times in 0 Posts

    CSS Pseudo Nth-Child Help

    For a forum, I'm trying to get every other row to have a certain background color. Along with that, matching <a> colors for the background. I've had a problem with styling the <hr> tag, but just skipped that, but now I need to do this. A little demonstration and the URL to what I have:

    http://www.harsh.bplaced.com/message.php?id=29

    Code:
    <style>
    tr > a :nth-child(even) {
      text-decoration: none;
      color: #ffffff;
    }
    tr > a :nth-child(odd) {
      text-decoration: none;
      color: #000000;
    }
    tr:nth-child(odd)  {
      text-decoration: none;
      color: #000000;
    }
    tr:nth-child(even) {
      background: #458B00;
      text-decoration: none;
      color: #ffffff;
    }
    </style>
    <font face="tahoma" size="2">
    <table>
    <tr style="background: #8AB200; color: #ffffff;">
    <td>blah - <a href="#">link</a> - to be white</td>
    </tr>
    <tr style="background: #8AB200;">
    <td>blah - <a href="#">link</a> - to be white</td>
    </tr>
    <tr>
    <td>blah - <a href="#">link</a> - to be black</td>
    </tr>
    <tr>
    <td>blah - <a href="#">link</a>  - to be white</td>
    </tr>
    <tr>
    <td>blah - <a href="#">link</a>  - to be black, etc.</td>
    </tr>
    </table>
    </font>
    Below are samples of the actual code (if it helps):

    Code:
    tr > a :nth-child(even) {
      text-decoration: none;
      color: #ffffff;
    }
    tr > a :nth-child(odd) {
      text-decoration: none;
      color: #000000;
    }
    .blacklink {
      text-decoration: none;
      color:#000000;
    }
    tr:nth-child(odd)  {
      text-decoration: none;
      color: #000000;
    }
    tr:nth-child(even) {
      background: #458B00;
      text-decoration: none;
      color: #ffffff;
    }
    Sorry about this being messy, since its generated with PHP.
    Code:
    <table class='maintable' width='100%' style='font-family: tahoma;'><tr class='headline'><td colspan='2' style='background: #7fa71f; padding: 2px;'><font size='2' color='#ffffff'><b>news> [Category] Title - by <u>Author</u></b> by <u>NewsBot</u> on <i>Sunday, 18th of October, 2009 (01:15:09 PM)</i> under Site Annoucements</font></td></tr><tr style='background: #7fa71f;'><td align='center'><font color='#ffffff' size='3'><img src='http://www.famfamfam.com/lab/icons/silk/icons/page_white_text.png' /><br /><a class='lol' href='/user/NewsBot' target='_parent'><b>NewsBot</b></a><br /><font size='2'><i>iPostNews</i><br /><b>Post Count</b>: 5<br /><br /><a class='lol' href='/pm/send/@NewsBot/' target='_parent'>[<b>PM</b>]</a><br /></font></td><td align='top'><font color='#ffffff' size='2'>Posted on Sunday, 18th of October, 2009 (01:15:09 PM)<br /><hr color='#ffffff' /><br /><font size='1'><blockquote><div class="quote"><span style="font-size: 15;">Category <strong>Title</strong></span><br /><span style="font-size: 12;">posted by <em>Author</em> on <em>Sunday, 18th of October, 2009 (01:15:09 PM)</em></span><br /><span style="font-size: 10;">[Description]</span><br /><br /><span style="font-size: 9;">Content </span></div></blockquote></font><br /><br /><hr color='#ffffff' /><br /></td></tr><tr class='mainrow'><td align='center'><font size='3'><img src='http://harsh.bplaced.net/images/avatars/Mark-dono_002.png' /><br /><a href='/user/Mark-dono' target='_parent'><b>Mark-dono</b></a><br /><font size='2'><i>FREDFREDBURGER</i><br /><b>Post Count</b>: 6<br /><br /><br /><a href='/pm/send/@Mark-dono/'  target='_parent'>[<b>PM</b>]</a></font><hr /></td><td align='top'><font size='2'>Posted on Sunday, 18th of October, 2009 (09:17:32 PM)<br /><hr /><br /><font size='1'>news will resume shortly</font><br /><br /><hr /><br /></td></tr><tr class='mainrow'><td align='center'><font size='3'><img src='http://harsh.bplaced.net/images/avatars/Mark-dono_002.png' /><br /><a href='/user/Mark-dono' target='_parent'><b>Mark-dono</b></a><br /><font size='2'><i>FREDFREDBURGER</i><br /><b>Post Count</b>: 6<br /><br /><br /><a href='/pm/send/@Mark-dono/'  target='_parent'>[<b>PM</b>]</a></font><hr /></td><td align='top'><font size='2'>Posted on Thursday, 22nd of October, 2009 (04:08:50 PM)<br /><hr /><br /><font size='1'>OLOLOLOLOL.</font><br /><br /><hr /><br /></td></tr><tr class='mainrow'><td align='center'><font size='3'><img src='http://harsh.bplaced.net/images/avatars/Mark-dono_002.png' /><br /><a href='/user/Mark-dono' target='_parent'><b>Mark-dono</b></a><br /><font size='2'><i>FREDFREDBURGER</i><br /><b>Post Count</b>: 6<br /><br /><br /><a href='/pm/send/@Mark-dono/'  target='_parent'>[<b>PM</b>]</a></font><hr /></td><td align='top'><font size='2'>Posted on Thursday, 22nd of October, 2009 (04:16:40 PM)<br /><hr /><br /><font size='1'>yay coloring bg<br /> 
    </font><br /><br /><hr /><br /></td></tr><tr class='mainrow'><td align='center'><font size='3'><img src='http://harsh.bplaced.net/images/avatars/Mark-dono_002.png' /><br /><a href='/user/Mark-dono' target='_parent'><b>Mark-dono</b></a><br /><font size='2'><i>FREDFREDBURGER</i><br /><b>Post Count</b>: 6<br /><br /><br /><a href='/pm/send/@Mark-dono/'  target='_parent'>[<b>PM</b>]</a></font><hr /></td><td align='top'><font size='2'>Posted on Thursday, 22nd of October, 2009 (04:18:50 PM)<br /><hr /><br /><font size='1'>bump</font><br /><br /><hr /><br /></td></tr><tr class='mainrow'><td align='center'><font size='3'><img src='http://harsh.bplaced.net/images/avatars/Mark-dono_002.png' /><br /><a href='/user/Mark-dono' target='_parent'><b>Mark-dono</b></a><br /><font size='2'><i>FREDFREDBURGER</i><br /><b>Post Count</b>: 6<br /><br /><br /><a href='/pm/send/@Mark-dono/'  target='_parent'>[<b>PM</b>]</a></font><hr /></td><td align='top'><font size='2'>Posted on Saturday, 24th of October, 2009 (02:07:00 PM)<br /><hr /><br /><font size='1'>halloween style. may update forum colors soon</font><br /><br /><hr /><br /></td></tr><tr class='mainrow'><td align='center'><font size='3'><img src='http://harsh.bplaced.net/images/avatars/Mark-dono_002.png' /><br /><a href='/user/Mark-dono' target='_parent'><b>Mark-dono</b></a><br /><font size='2'><i>FREDFREDBURGER</i><br /><b>Post Count</b>: 6<br /><br /><br /><a href='/pm/send/@Mark-dono/'  target='_parent'>[<b>PM</b>]</a></font><hr /></td><td align='top'><font size='2'>Posted on Sunday, 25th of October, 2009 (08:07:40 AM)<br /><hr /><br /><font size='1'>weeee</font><br /><br /><hr /><br /></td></tr></table>
    Last edited by CanHasPotato; 10-25-2009 at 04:23 PM. Reason: Topic Resolved

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    So, you are playing with CSS3(yet to be released) and some HTML of 90's ? Don't you need to get the same display in browsers like IE7,FF2 ?
    Last edited by abduraooft; 10-25-2009 at 03:01 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    May 2009
    Posts
    32
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    So, you are playing with CSS3(yet to be released) and some HTML of 90's ? Don't you need to get the same display in browsers like IE7,FF2 ?
    To be honest, I really didn't know that they're from different periods. I just was googling some stuff and found that. As for the different browsers, there is a different version for the rest that don't support it. Is there any other similar methods of doing this? I don't want to resort to using PHP to do it.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    You may set classes on your table rows dynamically using PHP to get an output like
    Code:
    <table>
    <tr class="odd">
     <td>A</td>
    </tr>
    <tr class="even">
     <td>B</td>
    </tr>
    <tr class="odd">
     <td>C</td>
    </tr>
    <tr class="even">
     <td>D</td>
    </tr>
    </table>
    and then apply styles to the rows like
    Code:
    tr.even td{
    background:#fff;
    }
    tr.odd td{
    background:#ccc;
    }
    /* and some other styles */
    PS: Once again, <font> has long ago been deprecated, so you shouldn't use it.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    CanHasPotato (10-25-2009)

  • #5
    New Coder
    Join Date
    May 2009
    Posts
    32
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    You may set classes on your table rows dynamically using PHP to get an output like
    Code:
    <table>
    <tr class="odd">
     <td>A</td>
    </tr>
    <tr class="even">
     <td>B</td>
    </tr>
    <tr class="odd">
     <td>C</td>
    </tr>
    <tr class="even">
     <td>D</td>
    </tr>
    </table>
    and then apply styles to the rows like
    Code:
    tr.even td{
    background:#fff;
    }
    tr.odd td{
    background:#ccc;
    }
    /* and some other styles */
    PS: Once again, <font> has long ago been deprecated, so you shouldn't use it.
    Thanks SO much! I though I would have to mess with the MySQL query, causing a lot more trouble.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •