CSS : ID를 사용하여 n 번째 요소 선택?

Question

이 내 HTML입니다 :

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

나는 세 번째 DD를 선택합니다 그러나 나는 그것이 작동되도록 기운 다. 이것은 내가 시도한 것입니다 :

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

스타일이 적용되지 않았습니다. 뭐가 잘못 됐나요?

감사합니다.

Answer 1

#id의 세 번째 자식은 실제로 <dt>test1</dt>이므로 선택자가 아무 것도 일치하지 않습니다.

이 여기에 :nth-of-type 선택 사용하는 것이 더 적절할 것 : 오히려 엄격한 HTML 구조를 활용하는 것도 가능합니다

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

(쌍을 <dt>/<dd>) 단순히 dl#id :nth-child(6)을 쓸 수 있지만에서 이 경우 그것은 무의미합니다 (브라우저 지원은 AFAIK 두 선택기에 대해 동일합니다).

Answer 2

또한 JQuery와 함께 할 수 있습니다 :

$("dl#id dd") 

이 당신에게 DL 내의 모든 DD를 줄 것이다. 그런 다음 세 번째를 들어 n 번째 요소 에 액세스 할 수있는 인덱스 이 될 것이다 :

이

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

그런 다음 스타일 속성을 추가 할 수 있습니다 :이 귀하의 질문에 대답 희망

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

을