Можно ли это сделать только с CSS, без JavaScript?

Question

Схема сценария заключается в том, что у меня есть div класса some-class, который либо будет иметь 1, либо 2 ребенка div s. Всякий раз, когда у меня есть 1, я хочу, чтобы этот ребенок div (div.some-class > div) имел width: 100%;, но всякий раз, когда у него есть 2, я хочу, чтобы они (div.some-class > div:nth-of-type(1), div.some-class > div:nth-of-type(2)) имели соответствующую ширину 60% и 40%. Я не могу изменить HTML, потому что он создан системой управления контентом.

Есть ли CSS-хак, который может дать мне такое поведение?

Answer 1

Уверенный, используйте display: table и adjacent sibling selector.

body > div { 
 
    display: table; 
 
    width: 600px; 
 
} 
 

 
div > div { 
 
    background: blue; 
 
    height: 100px; 
 
    display: table-cell; 
 
} 
 

 
div > div + div { 
 
    background: red; 
 
    width: 40%; 
 
}

<div> 
 
    <div></div> 
 
</div> 
 

 
<hr> 
 

 
<div> 
 
    <div></div> 
 
    <div></div> 
 
</div>