CODEWITHSUNDEEP
htmlcss
DevHelp
DevHelp

Reputation: 305

How to override base class css in custom css?

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

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: enter image description here

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

Upvotes: 0

Views: 1761

Answers (3)

DevHelp
DevHelp

Reputation: 305

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.

Upvotes: 1

Lycidias
Lycidias

Reputation: 161

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

Upvotes: 0

ash
ash

Reputation: 282

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.

Upvotes: 2

Related Questions