CODEWITHSUNDEEP
htmlcss
Welton122
Welton122

Reputation: 1131

CSS * overriding class style

I'm having some difficulty with applying CSS. I have a text color specified in a global external style sheet, which uses * to apply the color. I'm now trying to override this for one specific class. I've tried setting the text color for the class within the header of the document (which if I'm correct should override the external sheet?), however the color will not change.

Google chrome inspector shows me that * is still dominating the class specification. Any ideas?

My external style sheet looks like this:

* {
  font-size: 14px;
  color: #666;
 }

and my header style looks like this:

.error-list {
   color: red !important;
}

Its worth mentioning that I've tried it with and without the !important.

Upvotes: 0

Views: 457

Answers (3)

Asons
Asons

Reputation: 87262

It all comes down to which has higher specificity.

In below sample the span and the error-list rule has higher specificity than *, but the div.error-list has even higher than the error-list, so even if the error-list is placed after in the CSS, the highest wins (as with the first div in below sample).

To override

* {
  font-size: 14px;
  color: #666;
}

span {
  color: red;
}

div.error-list {
   color: blue;
}

.error-list {
   color: red;
}
<span>Hey, I'm red</span>

<div class="error-list">Hey, I'm <strike>red too</strike> blue</div>

<div class="error-list">Hey, I'm blue</div>

To override a higher specificity, one can use !important, below done on the 2 error-list (compare result with the first sample above).

* {
  font-size: 14px;
  color: #666;
}

span {
  color: red;
}

div.error-list {
   color: blue;
}

.error-list {
   color: red !important;
}
<span>Hey, I'm red</span>

<div class="error-list">Hey, I'm <strike>red too</strike> blue</div>

<div class="error-list">Hey, I'm blue</div>

Upvotes: 1

Todd
Todd

Reputation: 768

Try making your CSS rule more specific. For example if your .error-list is made of li tags. Change your CSS rule to .error-list li to make it more specific.

Upvotes: 1

felix91
felix91

Reputation: 462

When you inspect it, do you see the class you created? Maybe its not there at all.

Its hard to tell without the code but anyway !important can override the global class. Also inline css would override it but since you need to reuse it as a class this is not recommended

try this:

element[style] { /*don't change the style*/
   color: red!important;
}

Upvotes: 0

Related Questions