How to override base class css in custom css?

Question

Here is the screenshot from chrome dev tools. Here I want to override .ui-menu class and want to increase its with to "20em".

Here is what I am trying to override it :

.menu.ui-menu{

    width:20em;
}

I know my css is loading after the base css. Why its not taking the css supplied in custom css class?

UPDATE None of the suggestions provided below worked for me. I have added a div and provided id to div "menu". Now when I use following css , it works :

#menu  {

    width:20em;
    background-color: yellow;
}

Here is the screenshot from console:

Still unable to increase width of menu that has class "ui-menu". Can someone please help in identifying the selector for "ui-menu" ?

ash · Accepted Answer · 2017-05-04 21:57:29Z

2

You just need a space between .menu and .ui-menu, like this:

.menu .ui-menu {
    width:20em;
}

.menu.ui-menu is looking for an element with both the menu and ui-menu classes, whereas .menu .ui-menu is looking for an element with class ui-menu that is a child of menu.

answered May 4, 2017 at 21:57

ash

2821 silver badge6 bronze badges

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

Comments

DevHelp · Accepted Answer · 2017-05-05 16:51:19Z

1

I found answer to this problem. I am trying to set the css in angular 4 application and all styles are encapsulated by default. to fix this , use following code in component class:

import { ViewEncapsulation } from '@angular/core';

@Component({

   encapsulation: ViewEncapsulation.None

})

Once this is done, all css overriding will work as expected.

answered May 5, 2017 at 16:51

DevHelp

3055 silver badges22 bronze badges

Comments

Lycidias · Accepted Answer · 2017-05-04 22:07:21Z

0

The ui-menu class is on a div, so you could write:

div.ui-menu {
    width:20em;
}

or

.ui-menu {
   width:20em !important;
}

or

body .ui-menu{
width:20em;
}

or something else, all solutions are higher weighted than the ".ui-menu" style as there already is at the moment

answered May 4, 2017 at 22:07

Lycidias

1618 bronze badges

Collectives™ on Stack Overflow

How to override base class css in custom css?

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