CSS working inline but not from stylesheet

Question

I've read through all the other posts on this topic but non seemed to help.

When I have:

.tb-megamenu-submenu .dropdown-menu .mega-dropdown-menu .nav-child{
    left:50% !important;
}

It doesn't add the style to the element.

But If I use it inline it works:

<div data-class="increase-background-about" data-width="0" class="tb-megamenu-submenu increase-background-about dropdown-menu mega-dropdown-menu nav-child" style="left:50px">

I'm completely stumped and the other questions haven't helped.

Answer 1

Remove all the spaces and try. It should work!

.tb-megamenu-submenu.dropdown-menu.mega-dropdown-menu.nav-child{
    left:50% !important;
}

The issue with your styling is that all the classes you mentioned are for the same element.

So to target them you need to do it like I've done above - without spaces . Your styling would work when these classes are descendants

ie .tb-megamenu-submenu -> .dropdown-menu -> .mega-dropdown-menu -> .nav-child

Arrow represents the parent-child relation.

Learn basics of CSS from here .

Answer 2

1. Your selector is wrong. That is actually looking for a .nav-child element, inside a .mega-dropdown-menu , inside a .dropdown-menu , inside a .tb-megamenu-submenu. You should remove the spaces in your selector:

    .tb-megamenu-submenu.dropdown-menu.mega-dropdown-menu.nav-child{ left: 50%; } 

2. Please do not use !important . It makes your code very hard to maintain. Instead, try to write more specific selectors (incidentally, this should be specific enough).

Answer 3

You are trying to specify your element through multiple classes right? But by putting spaces between the selector you are actually getting descendants:

.tb-megamenu-submenu
   . dropdown-menu
       .nav-child <- getting this element 

To get the right result you should concotenate the .classes without spaces between, like:

.tb-megamenu-submenu.dropdown-menu.mega-dropdown-menu.nav-child { 
    left:50% !important; 
}