요소 만 볼

Question

은

나의 현재 코드는 다음과 같이 보입니다 논리.

<div id="container"> 
    <div style="visible only if no siblings">No items</div> 
    <div>Item 1</div> 
    <div>Item 2</div> 
<div> 

문제는 내가 "visible only if no siblings" 부분을 수행하는 방법을 알아낼 수 있다는 것입니다 : 이상적으로, 난 그냥

for each item in list 
    optput("<div>" + item + "</div>") 

이 그리고 다음과 같이 HTML 템플릿 모습 뭔가를하고 싶습니다 . CSS를 사용하여이를 안정적으로 달성 할 수있는 방법이 있습니까 (모든 표준 브라우저에서 작동)?

Answer 1

만없는 형제와 특정 클래스 표시 할 DIV 보내기 div의가 다른 형제가 없기 때문에

<div id="container"> 
    <div class="vis-only-no-siblings">No items</div> 
    <div>Item 1</div> 
    <div>Item 2</div> 
<div> 

는 한, 당신이 그렇게처럼 :only-child pseudoselector를 사용 할 수 있습니다를 :

#container div.vis-only-no-siblings{ 
    display: none; 
} 

#container div.vis-only-no-siblings:only-child { 
    display: block; 
}