비 형제 요소의 가치에 따라 CSS 규칙을 설정할 수 있습니까?

이 코드가 있다고 가정 해보십시오.비 형제 요소의 가치에 따라 CSS 규칙을 설정할 수 있습니까?

<div class="hello"> 
    <div class="cat dog"/> 
</div> 
<div class="notASibling" />

형제가 아닌 요소의 클래스 값을 기반으로 notASibling 속성을 설정할 수 있습니까? 예를 들어, 위의 코드에서 hello> cat 클래스가 이 아닌 개이면 notASibling의 표시 속성을 hidden으로 설정할 수 있습니다.

아이슬링이 "고양이 개"의 형제 였다면, 간단히 말할 수 있습니다 :

.cat:not(.dog) ~ .notASibling{ display:none; }

출처

2011-08-02 MM.

자바 스크립트로 확실히 가능하지만 자바 스크립트 이외의 솔루션을 요구하고 있습니까? – Dave

. 자바 스크립트에서 이것을 할 수 있습니다. 순수한 CSS 솔루션을 원한다면 DOM을 약간 리팩터링하십시오. 아마도 이런 식으로 :

<div class='dog'> 
    <div class='hello'> 
     <div /> 
    </div> 
    <div class='notASibling' /> 
</div> 


.cat div.notASibling { 
    /* special styles for cats */ 
} 
.dog div.notASibling { 
    /* special styles for dogs */ 
}

출처

2011-08-02 14:33:41 rcravens

이 CSS에서 할 수 없습니다. 여기있는 유일한 옵션은 Javascript를 사용하는 것입니다. jQuery 라이브러리는 그것들을 조작 할 요소를 선택하는 향상된 CSS 선택기를 사용하는 아이디어를 기반으로하며, 당신은 여기서 할 수 있습니다 : 당신은 순수 CSS에서 비 형제에 도달 할 수

prevWasADog = $(".notASibling").prev().children('.cat').eq(0).is('.dog');

출처

2011-08-02 14:31:41 nickf

대답은 없습니다. http://www.w3.org/TR/ (

.notASibling ~ .hello > .cat:not(.dog) { display: none }

그러나 이것은 CSS 3 셀렉터의 정의부터 수 없습니다 : 자발적으로, 당신은 자식 콤비와 형제 콤비 결합에 대해 생각이 같은 즉, css3-selectors /) 선택자는 다른 선택자가 아닌 피연산자로 "단순 선택자 시퀀스"가있는 결합 자만 사용할 수 있습니다. 따라서 W3C의 문법 규칙을 따르면 셀렉터 내에서 하나의 결합 자만 사용할 수 있습니다.

출처

2011-08-02 14:47:31

비 형제 요소의 가치에 따라 CSS 규칙을 설정할 수 있습니까?

답변

관련 문제