0

I have the following dynamic markup:

#navigation li {
  margin-bottom: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
}
<ul id="navigation">
  <li><a href="javascript:void(0);" class="selected">Start page</a></li>
  <li><a href="javascript:void(0);" style="display: none;">Logic</a></li>
  <li><a href="javascript:void(0);">Your name</a></li>
  <li><a href="javascript:void(0);" style="display: none;">Caller</a></li>
</ul>

Where list items need to be hidden the application injects style="display: none;" into the anchor tag which leaves a blank space due to the padding on the parent li element. When there is a large list and multiple hidden links the spacing between the list items gets messed up.

Is there a way in css to check if anchor has style="display: none;" and define the css to remove the padding top and bottom from the parent li?

Any way to achieve this without jquery in css?

Daweed
  • 1,419
  • 1
  • 9
  • 24
adam78
  • 9,668
  • 24
  • 96
  • 207
  • Can you set `display: none` to `li` directly instead of the links? – Rafael Mar 16 '21 at 11:09
  • An alternative would be, provided you have access to the necessary CSS, to only style the `a`-tags, and remove all styling from the `li`-tags. This way, if another system *hides* the a-tag, no spaces should be visible. – Yoshi Mar 16 '21 at 11:20
  • @Rafael no i don't, it's injected by the application into the a tag – adam78 Mar 16 '21 at 11:22
  • @Yoshi thats what i've done in the mean time. – adam78 Mar 16 '21 at 11:23
  • @adam78 if you control the CSS, then maybe apply margins and paddings to the links instead of list items? Would that help in any way or is it problematic? – Rafael Mar 16 '21 at 12:15

0 Answers0