첫째 아이

Question

나는 다음과 같은 HTML 코드가 있습니다

<div class="wrapper"> 
    <div some_unique_identifier class="whatever"> 
    <div class="content"> 
    </div> 
    <div some_unique_identifier2 class="whatever2"> 
    <div class="content"> 
    </div> 
</div> 

내가 클래스 content와 첫 번째 DIV를 양식에 일치하고 싶습니다,하지만 난 때문에 중간에 whatever 된 div의 .wrapper .content:first-child를 사용할 수 없습니다를 . 어떻게 했어? 그렇지 않으면 각각의 모든

Answer 1

당신은 내가 명시 적으로 직접 아이 선택기 (>)를 사용하여 첫 번째를 사용하는 어떤 또는 첫째 DIV ..

.wrapper > div:first-child .content 

을 단순히

.wrapper > div > .content:first-child{ 

} 

Answer 2

잘처럼 사용할 수 있습니다, 부모의 첫 번째 자식 인 .wrapper 내부 div (.whatever 및 .whatever2)가 선택됩니다.

Answer 3

난 당신이 콘텐츠 클래스의 첫 번째 발생 스타일에만 필요하다고 생각합니다. 내가 아는 한 당신은 CSS로 할 수 없다. 왜냐하면 CSS 의사는 즉각적인 부모의 첫 번째 자식을 얻을 것이기 때문입니다 (첫 번째 자식을 사용하는 경우).

<div class="wrapper"> 
    <div some_unique_identifier class="whatever"> 
    <div class="content">1</div> 
    </div> 
    <div some_unique_identifier2 class="whatever2"> 
    <div class="content">2</div> 
    </div> 
</div> 

과 같이 사용 JQuery와 또는 자바 스크립트 :

$('.content').first().addClass('first-content'); 

및 CSS : 당신은 당신의 코드 구조에 따라 그것을 여러 가지 방법으로 할 수 있습니다 This

Answer 4

.first-content{ 
    background:red; 
} 

확인 . 이제 당신이 따라 오는 구조가 같다고 가정합니다. 첫 번째 방법 :

.content:first-child { 
 
    background: red; 
 
}

<div class="wrapper"> 
 
    <div some_unique_identifier class="whatever"> 
 
    <div class="content"> 
 
     Content 1 
 
    </div> 
 
    <div class="content"> 
 
     Content 1 2nd child 
 
    </div> 
 
    <div some_unique_identifier2 class="whatever2"> 
 
    <div class="content"> 
 
     Content 2 
 
    </div> 
 
    <div class="content"> 
 
     Content 2 2nd child 
 
    </div> 
 
</div>

.wrapper div > div.content:first-child { 
 
    background: red; 
 
}

//Another way: 
 
<div class="wrapper"> 
 
    <div some_unique_identifier class="whatever"> 
 
    <div class="content"> 
 
     Content 1 
 
    </div> 
 
    <div class="content"> 
 
     Content 1 2nd child 
 
    </div> 
 
    <div some_unique_identifier2 class="whatever2"> 
 
    <div class="content"> 
 
     Content 2 
 
    </div> 
 
    <div class="content"> 
 
     Content 2 2nd child 
 
    </div> 
 
</div>

Answer 5

모두가 너무 가깝습니다. 그 사이에 div를 지정하지 않으려면 필요하지 않습니다.

.wrapper :first-child > .content 

이 한 시간 것들에 대한 작동하지만이 같은 너무 많은 JQuery와 선택기를 추가하는 것은 정말 페이지를 아래로 둔화 될 Plunker