-1

I am using Materialize.CSS framework and i am overriding most styles i want to change with !important tag in my stylesheet which is working as expected, but some element styles are not being overridden by my !important tag

I inspected dev tools and saw that the default style framework is applying on some elements like card card-title etc. already have !important tag applied over it which maybe is overriding my important or have a higher priority.

So please tell how to get around that.

[screenshot] [1]: https://i.stack.imgur.com/wVHgr.png

Kamal Jyotwal
  • 1
  • 3
  • You probably need to inspect the [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#:~:text=Specificity%20is%20a%20weight%20that,type%20in%20the%20matching%20selector.&text=As%20per%20CSS%20rules%2C%20directly,element%20inherits%20from%20its%20ancestor.) – Gerard Aug 19 '20 at 12:30
  • Can you create a sample jsfiddle of your issue, and share it here ? It will be easier to help, and understand the exact issue. – Abhishek Jain Aug 19 '20 at 12:30
  • The selector from Materialize is more specific than yours so it wil be used. Change yours to `.grey-text.text-darken-4` to override it. Or better yet remove the `text-darken-4` and `grey-text` class from the element – Nico Shultz Aug 19 '20 at 12:30
  • and this is exactly why you shouldn't liberally use `!important` – Pete Aug 19 '20 at 12:34

3 Answers3

1

both .grey-text.text-darken-2 and .grey-text have !important but .grey-text.text-darken-2specificity is more than .grey-text. more about that.

ehsan
  • 520
  • 5
  • 6
1

There are two ways you can go about this:

  1. Add !important to the same CSS selector in a later point in the file.
  2. Add another CSS selector of higher specificity, and apply !important to it.

Suggestion: It is always suggested to add a small code snippet which explains your problem. :D

Abhishek Jain
  • 434
  • 5
  • 16
1

If your !important is overriden by another with higher priority you can always give priority to yours snipping a higher parent like body

For example. if:

.container .label {color:red !important;}

is overriden the same line you wrote, add this insteed:

body .container .label {color:red !important;}

Also, if you call an element in your css class with an id (#) it will override the same property called by a class even if it's placed before in the sheet order

Alvaro Menéndez
  • 7,646
  • 3
  • 30
  • 53