...

View Full Version : Resolved CSS Pseudo Nth-Child Help



CanHasPotato
10-25-2009, 01:28 PM
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


<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):


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.

<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>

abduraooft
10-25-2009, 01:57 PM
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 ?

CanHasPotato
10-25-2009, 02:40 PM
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.

abduraooft
10-25-2009, 03:08 PM
You may set classes on your table rows dynamically using PHP to get an output like
<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

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.

CanHasPotato
10-25-2009, 03:19 PM
You may set classes on your table rows dynamically using PHP to get an output like
<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

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum