[css] 다른 div 내에서 첫 번째 div를 선택하는 데 사용할 수있는 CSS 선택 도구

Program / 글쓴이

다음과 같은 것이 있습니다.

<div id="content>

   <h1>Welcome to Motor City Deli!</h1>
   <div style=" font-size: 1.2em; font-weight: bolder;">Sep 19, 2010</div>
   <div > ... </div>

해당 div 내에서 날짜의 글꼴 색상을 설정할 수 있도록 두 번째 div ( “content”div 내의 첫 번째 div)에 대한 CSS 선택기는 무엇입니까?

답변

귀하의 질문에 대한 가장 정확한 답변은 …

#content > div:first-of-type { /* css */ }

이렇게하면 #content의 직계 자식 인 첫 번째 div에 CSS가 적용됩니다 (#content의 첫 번째 자식 요소 일 수도 있고 아닐 수도 있음).

다른 옵션 :

#content > div:nth-of-type(1) { /* css */ }

답변

원하는

#content div:first-child {
/*css*/
}

답변

H1이 항상 거기에 있다고 가정 할 수 있다면

div h1+div {...}

그러나 콘텐츠 div의 ID를 지정하는 것을 두려워하지 마십시오.

#content h1+div {...}

이는 jQuery와 같은 JavaScript 라이브러리에 의존하지 않고 지금 당장 크로스 브라우저를 얻을 수있는 것만 큼 좋습니다. h1 + div를 사용하면 H1 이후의 첫 번째 div 만 스타일을 얻습니다. 대안이 있지만 CSS3 선택기에 의존하므로 대부분의 IE 설치에서 작동하지 않습니다.

답변

당신이 찾고있는 것에 가장 가까운 것은 : first-child pseudoclass입니다 ; 당신은이 때문에 불행하게도이 귀하의 경우에는 작동하지 않습니다 <h1>전과 <div>s. 내가 제안하고 싶은 것은 <div>, like에 클래스를 추가 한 <div class="first">다음 그런 방식으로 스타일을 지정하거나 실제로 클래스를 추가 할 수없는 경우 jQuery를 사용하는 것입니다.

$('#content > div:first')

답변