How do I give a CSS class priority over an id?

Question

I have a element like this:

#idname{
  border: 2px solid black;
}

.classname{
  border: 2px solid gray;
}

<div id = "idname" class="classname">it is a test</div>

I want to give a bigger priority to its CSS class instead of its CSS id. Is it possible? (In other word I want to set gray-color as its border)

Kempe

Answer 1

Do not use !important because it is the worst solution, if you want to switch the styling then do it that way.

#idname{
  border: 2px solid black;
}

#idname.classname {
  border: 2px solid gray;
}

<div id = "idname" class="classname">it is a test</div>

If you want to target also other elements with the class classname and not only the #idname then use:

#idname.classname, .classname {
   border: 2px solid gray;
}

Rocher

Answer 2

What you're actually asking is how to give a class higher specificity than an ID.

An ID has a relatively high specificity of 100. A class has a specificity of 10.

There are many ways to increase the specificity of a selector.

Here are a few methods:

#idname.classname

Now this selector has a specificity of 110.

---

div#idname.classname

Now this selector has a specificity of 111 (because an element has a specificity of 1).

---

div[class="classname"]

This selector will fail to override an ID selector, because an attribute selector has a specificity of 10, and the total specificity for the selector is only 11.

---

The !important annotation

While specificity applies to selectors, the !important annotation applies to the declaration. It has the power to override all specificity points.

.classname { ...  !important; }

You can think of !important as having a specificity of 10000, as illustrated in this specificity website. Although technically !important does not participate in specificity.

---

More information:

• CSS Specificity
• CSS Specificity: Things You Should Know
• Relationship between !important and CSS specificity

Hangnail

Answer 3

You are going about this backwards. CSS rules have weight, and you should leverage those rules to correctly cascade styles.

element = 1 pt
class = 10 pt
id = 100 pt
inline = 1000 pt
!important = 10,000 pt

Consider this article on specificity

The !important clause, while it certainly works, builds inflexibility into your cascading rules and it becomes far too easy to do end up with competing directives.

My basic principle is to "generally" avoid IDs in CSS, and use them only when you need to override an existing class/element rule.

Ultimately, you are the author. Write your less specific rule as a class, and override it with an ID.

From my 14+ years building web stuff : if you have to use a !important clause, you are doing it wrong. I consider it very smelly.

That said sometimes it happens. You inherit someone else's terrible css, it can be hard to avoid.

Brachycephalic

The specificity of !important is not 10,000 (although one could think of it that way). In fact, !important has no specificity at all. Specificity applies only to selectors and !important is not a selector (it's a rule). – Hangnail

Answer 4

This is a somewhat old question, and there are good answers throughout already.

However, if you are able to reasonably modify the CSS selector for the ID in question, you may be interested in the :where() CSS pseudo-class function: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#the_where_exception

Suppose you have this HTML:

...
<section id="some-id">
  <p>I am feeling blue</p>
</section>
...

And you currently have this, but wish to have blue paragraphs in your section:

#some-id {
  color: red;
}

p {
  color: blue;
}

To use blue paragraphs, you could change it to:

:where(#some-id) {
  color: red;
}

p {
  color: blue;
}

In some respects, this could achieve inverse effects of the !important tag, although they are quite different types of CSS features.

Surfbird

Answer 5

A little other workaround solution that in some cases could help is to use

div[id=idname] {
   border: 2px solid black;
}
.classname{
   border: 2px solid grey;
}

I needed it in a drag&drop little game

Grime