[RESOLVED] Trouble with css first-child

[dtm32236]

Hi,

I have table formatted like so:

<table id="challengeDates">
	<tbody>
		<tr>
			<td class="past">whatever</td>
			<td class="upcoming">stuff</td>
			<td class="upcoming">goes</td>
			<td class="upcoming">here</td>
		</tr>
	</tbody>
</table>

And I want to style the first ".upcoming", so my CSS looks like:

#challengeDates .upcoming:first-child {
	font-weight: bold;
}

But this isn't working but I'm not sure why. I guess that I'm not targeting the element correctly, but I'm not sure what I'm doing wrong. Any thoughts?

[cbVision]

It's not working because .upcoming doesn't have any children. I think what you're wanting is "first-of-type." I've never used this before and couldn't seem to get it to work in your example though

[dtm32236]

Yeah, that makes sense.
Unfortunately I need IE7 support. I think that I may use jQuery after page load to add a "next" class to the first instance of "upcoming". That may be best.

Thanks for taking a look!

[cbVision]

That's exactly how I would do it too ... just a line of jQuery!