Delete a css selector

Question

I have the following:

        <div>
            <ul class="menu-top-header-main-right">
                <li><span class="icon-procurar"></span></li>
                <li>Entrar</li>
                <li>Inscrever-se</li>
            </ul>
        </div>

and my css:

.top-header-main header div ul li span{
    display: inline-block;
    padding: 0 .8em;
    width: 20px;
    height:24px;
    vertical-align: middle;
}

.top-header-main header div ul li:not(.icon-procurar):hover{
    border-bottom: 3px solid #2BDE73;
    cursor: pointer;
}

I intend to exclude the span of :hover but it doesn’t seem to work.

Any help? Thank you.

Answer 1

PARENT SELECTOR

What you’re trying to do is called Parent selector which is a type of selector that NAY exists in CSS, nor in CSS3. Explaining a little better, you want to style an element according to the presence/absence of a child element. As already said cannot be achieved with CSS3, but can with jQuery:

$('li:has(span)').css("borderBottom", "none");

div ul li span{
    display: inline-block;
    padding: 0 .8em;
    width: 20px;
    height:24px;
    vertical-align: middle;
}

div ul li:hover{
    border-bottom: 3px solid #2BDE73;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul class="menu-top-header-main-right">
    <li><span class="icon-procurar"></span></li>
    <li>Entrar</li>
    <li>Inscrever-se</li>
  </ul>
</div>

Some sources of conultation (in English):

CSS selector for "foo that contains bar"?

Is there a CSS Parent selector?