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.

Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. See How to create a Minimal, Complete, and Verifiable example — Paulie_D
– Paulie_D, Commented Sep 5, 2018 at 15:40

Salvatore · Accepted Answer · 2018-09-05 15:54:28Z

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

i.e. .tb-megamenu-submenu -> .dropdown-menu -> .mega-dropdown-menu -> .nav-child

Arrow represents the parent-child relation.

Learn basics of CSS from here.

edited Sep 5, 2018 at 15:54

answered Sep 5, 2018 at 15:40

Salvatore

1,4311 gold badge12 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BenM · Accepted Answer · 2018-09-05 15:41:04Z

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%;
}
```
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).

answered Sep 5, 2018 at 15:41

BenM

53.3k26 gold badges116 silver badges172 bronze badges

Comments

GMachado · Accepted Answer · 2018-09-05 15:52:04Z

0

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; 
}

edited Sep 5, 2018 at 15:52

answered Sep 5, 2018 at 15:45

GMachado

79911 silver badges24 bronze badges

Collectives™ on Stack Overflow

CSS working inline but not from stylesheet

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related