Hide anchor tag through CSS if inner span text is empty

Asked Jul 18 '19 at 10:27

Active Jul 18 '19 at 10:27

Viewed 24 times

I have this HTML code

<div class="icon-dropdown-menu">
    <a class="text-left"><span class="icon-folder"></span> <span id="folder-dropdown-parent"></span></a>
    <a class="text-left"><span class="icon-folder"></span> <span id="folder-dropdown-grand-parent"></span></a>
    <a class="text-left"><span class="icon-folder"></span> <span id="folder-dropdown-root">root</span></a>
</div>

Is it possible with CSS to be able to hide, e.g. display: none the anchor tag here if the inner span text is empty? Like in the HTML above, the first two a tags should be hidden through CSS.

asked Jul 18 '19 at 10:27

quarks

33,478
73
290
513

you have to use Javascript – Abdelillah Aissani Jul 18 '19 at 10:30
Since `a` and `span`, by default, have zero dimensions, they will already be hidden in your example if they contain no text. But to answer your question; no. CSS does not have a parent selector. – Turnip Jul 18 '19 at 10:31
in addition to the duplicate consider this: https://developer.mozilla.org/en-US/docs/Web/CSS/:empty – Temani Afif Jul 18 '19 at 10:32
https://developer.mozilla.org/en-US/docs/Web/CSS/:empty will not work here since you have span nodes inside and also white space text nodes. – Nenad Vracar Jul 18 '19 at 10:32
let's use javascript – Giang D.MAI Jul 18 '19 at 10:33

Hide anchor tag through CSS if inner span text is empty

0 Answers0