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

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

---

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

<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 {...}

그러나 Content div의 ID를 지정하는 것을 두려워하지 않습니다.

#content h1+div {...}

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

---

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

$('#content > div:first')

참고 URL : https://stackoverflow.com/questions/3747547/what-css-selector-can-be-used-to-select-the-first-div-within-another-div