2013-06-26 2 views
3

나는이 같은 DOM 2 개 요소가 나란히있는 경우 : I 클래스에게 나는 이런 식으로 뭔가를 생각 div.container.fullscreenCSS 현재 요소 옆에있는 요소를 어떻게 타겟팅합니까?

있다 a.buttondiv.container 경우 대상으로 지정할

a.button 
div.container 

:

div.container.fullscreen + a.button { display:none },하지만 작동하지 않습니다.

제안 사항?

+0

당신이 HTML을 작성할 수

양식 요소는 작업에 아이디어를 볼 수 있습니다? – kingdamian42

+2

이 답변을 시도하십시오 : http://stackoverflow.com/questions/1817792/css-previous-sibling-selector – Lucas

+0

전체 화면으로 div를 가져 오는 데 사용되는 버튼입니까? 그렇다면 해결책이있을 수 있습니다. 귀하의 HTML 마크 업 plz :) –

답변

6

+다음 형제 선택기로 작동하지 않습니다. 즉 div다음 즉시 형제, 예를 들면 있다면

당신의 선택 div.container.fullscreen + a.buttona을 대상 것이다 그 후 모든 형제를 선택, 그리고 이전 겠지만

div.container.fullscreen 
a.button // this is now targeted 

div.container.fullscreen ~ a.button이 작동 중 하나를하지 않습니다.

a.button // this isn't targeted. 
div.container.fullscreen 
a.button // this is now targeted 
a.button // so is this 

슬프게도 순수 CSS를 사용하여 원하는 것을 달성하기위한 형제 선택 도구가 없습니다.

0

EF 앞에 오는 경우에만 E + F 구문이 일치합니다. 방금 설명한 것처럼 주문한 경우 순수한 CSS로 a의 스타일을 지정할 수 있다고 생각하지 않습니다.

containerbutton의 부모 컨테이너에 fullscreen 클래스를 넣기 위해 HTML을 변경하기 만하면됩니다. 이렇게하면 스타일을 다음과 같이 선언 할 수 있습니다.

.fullscreen > div.container { 
    /* 
    any fullscreen modifications to be done, what used to be in div.fullscreen 
    */ 
} 

.fullscreen > a.button { 
    display: none 
} 
0

실제 HTML이 누락되었습니다. <a>의 속성은 href입니까? 목표는 <div>입니까?

버튼이 완전히 펼쳐진 상태에서 div 아래에 숨겨져 있으면 div가 숨겨지기 때문에 버튼을 숨길 필요가 없습니다. 그래서 우리는 당신이 일을하는지의 명확한 아이디어를 얻을 수 http://codepen.io/gcyrillus/pen/otFim

관련 문제