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)

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;
}