CODEWITHSUNDEEP
css
yoyo
yoyo

Reputation: 55

How to ignore one element in css?

I have a menu effect where it underlines the heading of the menu you hover on, the problem is that it also underlines the logo when you hover on it...

The logo is in an li with the class name .centered-inline-logo-wrap I just need to know how to ignore that when the bottom effects are triggered...

#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
 content: "";
 position: absolute;
 z-index: 2;
 left: 0;
 right: 0;
}
#top-menu li a:before {
 content: "";
 position: absolute;
 z-index: -2;
 left: 0;
 right: 100%;
 bottom: 50%;
 background: #FFF; /*** COLOR OF THE LINE ***/
 height: 3px; /*** THICKNESS OF THE LINE ***/
 -webkit-transition-property: right;
 transition-property: right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
#top-menu li a:hover {
 opacity: 1 !important;
}
#top-menu li a:hover:before {
 right: 0;
}
#top-menu li li a:before {
 bottom: 10%;
}

Upvotes: 1

Views: 439

Answers (1)

Ouroborus
Ouroborus

Reputation: 16904

Might be able to use the :not() selector, as in:

#top-menu li:not(.centered-inline-logo-wrap) a:before

The li:not(.centered-inline-logo-wrap) portion would be li elements that do not have the class centered-inline-logo-wrap.

Upvotes: 2

Related Questions