Hiding elements with CSS only

1

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 class="head">Breakfasts</li>
       <li>{Breakfast 1}</li>
       <li>{Breakfast 2}</li>
       <li>{Breakfast 3}</li>
    </ul>
    <ul id="dinners">
       <li class="head">Dinners</li>
       <li>{Dinner 1}</li>
       <li>{Dinner 2}</li>
       <li>{Dinner 3}</li>
    </ul>
    <ul id="suppers">
       <li class="head">Dinners</li>
       <li>{Supper 1}</li>
       <li>{Supper 2}</li>
       <li>{Supper 3}</li>
    </ul>
    <ul class="favorites">
       <li class="head">Favourites</li>
       <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.

snowfinch27

Posted 2016-08-19T18:08:49.903

Reputation: 21

Question was closed 2016-08-19T18:18:34.990

4Note, I don't believe this is off-topic, as it looks like a [tag:programming-puzzle] to me – Nathan Merrill – 2016-08-19T18:11:35.977

2@NathanMerill Programming puzzle or not, it still needs an objective winning criterion. – Dennis – 2016-08-19T18:20:22.437

@Dennis isn't it first posted by default? – Nathan Merrill – 2016-08-19T18:26:15.830

@NathanMerrill Amended: first corrected posted – Conor O'Brien – 2016-08-19T18:26:53.350

2@NathanMerrill As far as I know, no. The tag doesn't even have a wiki. – Dennis – 2016-08-19T18:31:49.070

Answers

1

I think your hint gave too much away:

div>ul:target{
   display: block;
}
div>ul{
   display: none;
}

Nathan Merrill

Posted 2016-08-19T18:08:49.903

Reputation: 13 591

thanks for proposing a solution, it's almost it, but if I click the "Favourite dishes", nothing is shown – snowfinch27 – 2016-08-19T18:21:13.427