2013-02-12 3 views
1

에 따라 부모 블록에 스타일을 적용 :이 아이 .subject가 비어 있다면 : (없음 표시)를 .container아이의 상태는 다음 블록 구조로

<div class="container"> 
    <div class="title"></div> 
    <div class="subject"></div> 
</div> 

는 숨길 수 있습니까? 감사합니다.

+4

하지 CSS로, – AnilkaBobo

+0

CSS는 스타일링되지 검증 및 빈 것을 확인하기위한 것입니다. – Kingk

+0

요소 자체에 자식이없는 경우 빈 의사 선택기 인'.container : empty {display : none}'을 사용할 수 있습니다. 그러나 이것은 자녀가 있기 때문에 귀하의 예를 들어 작동하지 않습니다. – cimmanon

답변

4

음 ... 가짜로 만들려고 시도 할 수 있습니다 ... 제목을 position: absolute으로 만들고 컨테이너 세트 overflow: hidden; 컨테이너 자체는 .subject 태그에 무엇인가 넣으면 볼 수 있습니다. 이처럼 : 만 JS로 jsfiddle example

1

:empty 요소에 노드가 없지만 가지고있는 경우 psuedo 클래스를 사용할 수 있습니다. JS가 필요합니다.

$(".container *") { 
    if($.trim($(this).html()).length == 0 && $.trim($(this).text()).length == 0) { 
    $(".container").css({ "display" : "none" }); 
    } 
}); 
2

저는 이것을 수행하기 위해 자바 스크립트를 사용해야한다고 생각합니다.

$(".container").each(function() { 
    if ($(this).children('.subject').html() == '') { 
      $(this).hide(); 
    } 
}); 

예에서 : jQuery를에 http://jsfiddle.net/m5jjs/

+0

대신에 – Pete

+0

전화를 걸면 아이들을 사용할 것입니다. 그것을 보여주기 위해 편집 됨. –

1

하실 수 없습니다 모든 브라우저에서 순수 CSS에서 내가 알고. 이미 프로젝트에 jQuery를 종속성이있는 경우

CSS Selectors Level 4에서 다가오는 부모 선택을위한 jQuery를 플러그인 cssParentSelector polyfill이있다.