The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Hide elements with CSS only

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #244744

    I encountered an interesting problem not long ago, and I want to share it. The problem: 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.

    The markup:

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

    Hint: you have to use :target pseudo-class.


    We don’t take challenges…this feels like we’re doing your homework!

    What have you tried?


    Ok, sorry, I didn’t want it to look so, this what I came up with:

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

    But with this CSS if I click the first element, nothing is shown, although, it’s possible


    You were using a class on “Favourites” instead of an ID

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.