n-й вопрос привязки ребенка

Question

У меня есть страница, которая приносит записи базы данных и отображает их, и я дал каждому другому элементу / списку этот стиль:

hjl:nth-child(odd) { background: #F2F2F2;}

И это мой 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>

Однако, когда я пытаюсь обернуть каждую запись целиком в тег привязки, каждая запись изменяется на стиль фона, указанный выше, больше не распознавая «нечетный».

Это генерируемый HTMl:

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

Я не привык использовать nth-child, поэтому я не уверен, как это исправить (я пытался поиграть с добавлением 'a' к приведенному выше, но это не имеет никакого значения).

У кого-нибудь есть какие-нибудь указатели, на которые они могут пнуть меня?

Спасибо, Дэн

Answer 1

:nth-child работает между братьями и сестрами ^{документация} . Это означает, что счетчик (odd в данном случае ) применяется к элементам с одним и тем же родителем.

Если вы заключите каждый .hjl в a, то они больше не будут иметь одного и того же родительского элемента, поэтому селектор пытается найти нечетные .hjl элементы внутри элемента a и находит только первый (единственный, который существует в a).

Итак, вы должны изменить свой селектор, чтобы он работал с тегами a ( возможно, примените также class для большей точности )

---

в другой заметке, размещение элементов div и h1/h2 внутри тега a недопустимо и вызовет другие проблемы.

Answer 2

Вы должны добавить ":" прямо перед ним, вот так:

YourElement:nth-child( { number expression | odd | even } ) {
declaration block
}

Ваш элемент - что-то вроде tr, li или что-то в этом роде. Надеюсь, это поможет.