CSS 어떤 형제 선택

Question

는 다음과 같은 HTML을 고려하지 :

<div> 
    <div class="iwant" /> 
    <div class="idontwant" /> 
</div> 
<div> 
    <div class="iwant" /> 
</div> 

내가 클래스 형제가없는 모든 iwant을 선택할 것이라고 (내가 HTML을 수정할 수있는 콘텐츠를 크롤링) 선택기에 관심이 있어요 idontwant.

Answer 1

클래스별로 요소를 일치 시키거나 일치시키지 않는 형제 선택기가 없습니다. 내가 생각할 수있는

가장 가까운 선택은

.iwant:only-child 

이다 그러나이 선택은 유형에 관계없이 또는 클래스의 부모 div의 자녀로서 그 div class="iwant" 이외의 다른 요소가있을 수 없음을 의미합니다. 이것은 HTML의 구조에 따라 필요를 충족시킬 수 있습니다. 따라서 시도해 볼 가치가 있습니다. 클래스 이름이 문제가된다면, 해결책이별로 없다는 것입니다. 왜냐하면 클래스에 의해 필터링하고 나머지는 무시하는 CSS에 :only-of-class 의사 클래스가 없기 때문입니다.

Answer 2

부정 형제 CSS 셀렉터가 없습니다. 다음 .idontwant의 스타일을 재설정, 새로운 스타일을 설정하는 형제 선택기를 사용

이

div.iwant { 
    /*Set CSS here*/ 
    display: inline; 
} 
div.iwant ~ div.idontwant { 
    /*Reset CSS*/ 
    display: block /* Default of DIV is block*/ 
} 

Answer 3

특정 형제 항목없이 항목을 대상으로 더 좋은 방법은 없습니다. 그러나 .iwant:last-child을 사용하여 다음 형제가없는 항목을 타겟팅 할 수 있습니다.

예 : http://codepen.io/martinkrulltott/pen/YyGgde