nth child anchor issue - css

Question

I have a page which brings database entries in and displays them, and i have given every other entry/listing this style:
hjl:nth-child(odd) { background: #F2F2F2;}
And this is my HTML/PHP
<a href="paging.php?job_id=<?php echo $rsjobinfo['job_id'];?>">
<div class = "hjl">
<div class = "hjldate">
<p>Posted on:<br /><?php echo $date = date('d M Y', strtotime($rsjobinfo['date']));?></p>
</div>
<div class = "hjljobinfo">
<h1><?php echo $rsjobinfo['job_title'];?></h1>
<h2><?php echo $rsjobinfo['company_name'];?> |</h2>
<p class = "location"><?php echo $rsjobinfo['city'];?>, <?php echo $rsjobinfo['county'];?>, <?php echo $rsjobinfo['country'];?></p>
</div>
</div>
</a>
However, when i try to wrap each entire entry in an anchor tag, every entry changes to the background style listed above, no longer recognising the 'odd'.
This is the HTMl that's generated:
<a href="paging.php?job_id=253">
<div class = "hjl">
<div class = "hjldate">
<p>Posted on:<br />11 Jul 2011</p>
</div>
<div class = "hjljobinfo">
<h1>Entry One</h1>
<h2>Company |</h2>
<p class = "location">New York, NY, USA</p>
</div>
</div>
</a>
I'm not used to using nth-child so i'm not sure how to fix it (i've tried playing around with adding an 'a' to the above but its not making any difference).
Does anyone have any pointers they can kick me towards?
Thanks
Dan

Answer 1

:nth-child works between siblings documentation. That means that the counter (odd in this case) applies to elements with the same parent.
If you wrap each .hjl in a a then they no longer share the same parent so the selector tries to find odd .hjl elements inside the a element and finds just the first one (the only one that exists in the a).
So, you should change your selector to work with a tags (perhaps apply a class as well for more precision)
on another note, placing div and h1/h2 elements inside a a tag is invalid and will cause other issues.

Answer 2

You need to add ":" right in front of it, like so:
YourElement:nth-child( { number expression | odd | even } ) {
declaration block
}
Your element is something like tr, li, or anything like that. Hope that helps.