Shafizadeh Shafizadeh - 5 months ago 7
CSS Question

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

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

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