Как отобразить DIV только при наличии в другой DIV

Question

Я хочу, чтобы отобразить .tel в #header только если он существует в #switcher. Основная ситуация:

<div id="switcher"><div class="tel"></div></div> 
<div id="header"><div class="tel"></div></div> 

Но пользователь в системе может отключить отображение .tel в #switcher. После того, что код-то вроде этого:

<div id="switcher"></div> 
<div id="header"><div class="tel"></div></div> 

В этой ситуации я хочу, чтобы скрыть .tel в #header.

Я знаю, как это сделать с jquery, но могу ли я сделать это только с помощью css или scss?

Answer 1

Это решение зависит от того, где <div id=switcher> должен появиться на странице, но ... если вы лукаво, вы можете изменять порядок разметки что-то вроде этого:

<header> 

<div id="switcher"> 
<div class="tel"></div> 
</div> 

<div class="tel"></div> 

</header> 

, а затем использовать следующие

header .tel { 
display: none; 
} 

header #switcher .tel, 
header #switcher ~ .tel { 
display:block; 
}