Forums

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

Home Forums CSS How to 'display: none' this ?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #149742
    Woohoo
    Participant

    Hi all,

    I’ve spent to many hours figuring this one out, and I still don’t get what I want. This is the case: I have an unordened list like this:

    <ul>
    <li><a href="link1" >Link 1</a></li>
    <li><a href="link2" class="current_page_ite">Link 2</a></li>
    <li><a href="link3">Link 3</a></li>
    </ul>

    What I want is that the second listitem (because the ‘a’ tag inside this ‘li’ has the class ‘current_page_item’ assigned to it) will not be shown during rendering of the page. I’ve tried various scenarios using ‘display:none’ but I only get the ‘a’ tag hidden, not the entire ‘li’, which means that I get a blank line inside my list.

    How can I get the entire ‘li’ thing hidden?

    #149746
    Paulie_D
    Member

    Why not move the class to the li…then display:none will work?

    This would be the optimal solution.

    Otherwise, it will require a javascript solution as you cannot select a parent element in CSS.

    http://codepen.io/Paulie-D/pen/xpmBd

    #149770
    Senff
    Participant

    Another solution would be to make sure that the LI’s don’t have any height assigned to them. An empty LI would then not give an empty line.

    Of course, that only works if you don’t have any list style defined either. See: http://codepen.io/senff/pen/vdHCE

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