CSS: выбор n-го элемента с помощью идентификатора?

Question

Это мой HTML:

<dl id="id"> 
    <dt>test</dt> 
    <dd>whatever</dd> 
    <dt>test1</dt> 
    <dd>whatever2</dd> 
    .... 
</dl> 

Я хочу, чтобы выбрать третий дд, но я не могу заставить его работать. Это то, что я пробовал:

dl#id dd:nth-child(3) { 
    color: yellow; 
} 

Стиль не применяется, что не так?

Спасибо!

Answer 1

3-й ребенок #id на самом деле является <dt>test1</dt>, поэтому селектор не соответствует ни одному.

Было бы более целесообразно использовать :nth-of-type селектор здесь:

dl#id dd:nth-of-type(3) 

Также можно воспользоваться довольно жесткой HTML структуры (пары <dt>/<dd>) и просто написать dl#id :nth-child(6), но в в этом случае это бессмысленно (поддержка браузера AFAIK одинакова для обоих селекторов).

Answer 2

Вы также можете сделать это с JQuery:

$("dl#id dd") 

Это даст вам все дд в пределах дл. с индексом, то вы можете получить доступ к п-й элемент Для третьего это будет:

$("dl#id dd").eq(2) 

Вы можете добавить свойство стиля:

$("dl#id dd").eq(2).css("color", "yellow") 

Я надеюсь, что это ответил на ваш вопрос