# Hiding elements with CSS only [closed]

In the following markup without changing it or using JS, implement the behavior to show only the ul element of div which name is clicked in the first ul (before div). Name is content of li in top ul and it matches the content of the first li in ul you want to show. Elements that have {content} are just fillers and have no meaning for problem.

<ul>
<li class="head"><a href="#favorites">Favourite dishes</a></li>
<li><a href="#breakfasts"><i>Breakfasts</i></a></li>
<li><a href="#dinners"><i>Dinners</i></a></li>
<li><a href="#suppers"><i>Suppers</i></a></li>
</ul>
<div>
<ul id="breakfasts">
<li>{Breakfast 1}</li>
<li>{Breakfast 2}</li>
<li>{Breakfast 3}</li>
</ul>
<ul id="dinners">
<li>{Dinner 1}</li>
<li>{Dinner 2}</li>
<li>{Dinner 3}</li>
</ul>
<ul id="suppers">
<li>{Supper 1}</li>
<li>{Supper 2}</li>
<li>{Supper 3}</li>
</ul>
<ul class="favorites">
<li>{Favourite 1}</li>
<li>{Favourite 2}</li>
<li>{Favourite 3}</li>
</ul>
</div>


This problem really has the solution and was very interesting for me, so I decided to post it here even if it's not very practical. Hint: you have to use :target pseudo-class.

• Note, I don't believe this is off-topic, as it looks like a programming-puzzle to me – Nathan Merrill Aug 19 '16 at 18:11
• @NathanMerill Programming puzzle or not, it still needs an objective winning criterion. – Dennis Aug 19 '16 at 18:20
• @Dennis isn't it first posted by default? – Nathan Merrill Aug 19 '16 at 18:26
• @NathanMerrill Amended: first corrected posted – Conor O'Brien Aug 19 '16 at 18:26
• @NathanMerrill As far as I know, no. The tag doesn't even have a wiki. – Dennis Aug 19 '16 at 18:31

div>ul:target{