Malork Malork - 2 months ago 6
CSS Question

Select anchor which have no i child

Is it possible to select a tag which child is not

i
?

Example:

<a href="#"> <!--select this-->
Link!
</a>

<a href="#"> <!--but not this-->
<i class="material-icons">menu</i>
</a>


I tried
a:not(>i)
and
a:empty
but it didn't work.

Answer

It, most unfortunately, isn't. It's been proposed, but that's about it. You would need a bit of js.

var links = document.querySelectorAll("a"),
i = 0, ii = links.length;
for (i; i,ii; i++) {
    if(!links[i].querySelector("i")){
        links[i].classList.add("without-i");
    }
}
Comments