- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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?
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.
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