CSS override !important

Question

I am trying to customize the css of my website but the default theme has !important property next to color code which I am not able to override.

By Default:

body.theme-whyte .main-wrapper #header .main-nav .content .menu-block-wrapper > ul > li.expanded:hover > .nolink,
body.theme-whyte .main-wrapper #header .main-nav .content .menu-block-wrapper > ul > li.expanded:hover > .nolink::after {
  color: #404040 !important;
}

Changes I would like to make:

body.theme-whyte .main-wrapper #header .main-nav .content .menu-block-wrapper > ul > li.expanded:hover > .nolink,
body.theme-whyte .main-wrapper #header .main-nav .content .menu-block-wrapper > ul > li.expanded:hover > .nolink::after {
  color: #a03021 !important;
}

I am not able to override !important tag. I am a bit new to CSS. Can someone please help me out with this? Thanks in advance.

did you try loading the custom css file which has your changes before the theme css? — M A Salman, Apr 22 '20 at 22:08
There is just an option of CSS Editor where I am inputting the custom css code. I cannot upload the custom css file. — Muhammad Ahmed, Apr 22 '20 at 22:10
there was a question as your same topic..check this link https://stackoverflow.com/questions/11178673/how-to-override-important — Md Rakibul Islam, Apr 22 '20 at 22:14

score 0 · Answer 1 · answered Apr 22 '20 at 22:24

Order of priority in CSS:

1) In-Line CSS

2) Embedded CSS

3) External CSS

The same will work even if the tags are !important.

Example

If your changes are from stylesheets which are all external, just put the stylesheet with the desired style in, after the one you wish to replace.

CSS override !important

1 Answers1