인 페이지 반응 형 CSS?

Question

@media 및 기존의 반응 형 디자인과 같이 브라우저 크기가 아니라 다른 요소에 반응하는 페이지 내 요소를 HTML 및 CSS로만 작성하는 방법이 있는지 알아 내려고하고 있습니다.

예를 들어, 너비가 900 픽셀 인 요소가 있습니다. 때로는 1, 2 또는 3 개의 하위 요소를 포함 할 수 있습니다. 나는 자식 엘리먼트가 얼마나 많은 형제 엘리먼트가 존재하는지에 따라 스타일을 만들고 추가 엘리먼트를 표시하기를 원한다.

예

<div id="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

대

<div id="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

요소가 다르게 나타납니다 아이 - 폭이 다른, 다른 패딩, 테두리 ... 그리고 그들은 또한에 숨겨진 될 자식 요소를 가질 것 첫 번째 샘플이지만 두 번째 샘플에 표시합니다.

나는 이것이 JS, PHP로 할 수 있다는 것을 알고있다. 그러나 나는 그것없이 그것을 할 수있는 방법이 있는지 알아 내려고하고있다. 다른 자식 요소의 존재 여부에 따라 특정 요소를 숨기거나 표시하고 싶기 때문에 상대 크기 (예 : %)를 사용하여 잘라내 지 않습니다.

감사

Answer 1

그것은 CSS3와 가능성은 그것을 알아 내기 위해 나에게 몇 분했다.

체크 아웃 http://jsfiddle.net/Vdz7s/.

HTML :

<h1>One:</h1> 
<div class="parent"> 
    <div class="child">1</div> 
</div> 

<h1>Two:</h1> 
<div class="parent"> 
    <div class="child">1</div> 
    <div class="child">2</div> 
</div> 

<h1>Three:</h1> 
<div class="parent"> 
    <div class="child">1</div> 
    <div class="child">2</div> 
    <div class="child">3</div> 
</div>​ 

CSS :

.parent .child:nth-last-child(1) 
{ 
    border:1px solid yellow; 
} 

.parent .child:nth-last-child(2), 
.parent .child:nth-last-child(2) ~ .child 
{ 
    border:1px solid orange; 
} 

.parent .child:nth-last-child(3), 
.parent .child:nth-last-child(3) ~ .child 
{ 
    border:1px solid red; 
} 
​ 

나는 코드가 당신은 단지 어린이 차일을 대상으로하고 그들과 함께 원하는대로 할 필요가 꽤 설명이 필요하다고 생각합니다.