Delete a css selector

Question

Delete a css selector

Navigation

#1 by (-2 votes)

-2

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 want to exclude span from :hover but it does not seem to work.

Any help? Thank you.

html5 css3

asked by anonymous 11.02.2017 / 00:54

1 answer

Background does not appear [HTML5] [closed] Operator overload in C ++

score -2 · Answer 1

PARENT SELECTOR

What you're trying to do is called parent selector which is a NO selector type that exists in CSS or CSS3. By explaining a little better, you want to style an element according to the presence / absence of a child element. As already said can not 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><ulclass="menu-top-header-main-right">
    <li><span class="icon-procurar"></span></li>
    <li>Entrar</li>
    <li>Inscrever-se</li>
  </ul>
</div>

Some sources of interest:

CSS selector for "foo that contains bar"?

Is there a CSS parent selector?