How to specify CSS class priority over identifier?

Question

I have an element like this:

#idname{
  border: 2px solid black;
}

.classname{
  border: 2px solid gray;
}

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

Run code

I want to pay more attention to its CSS class, and not its CSS identifier. Is it possible? (In other words, I want to set gray-color as border)

Answer 1

Do not use !important, because this is the worst solution, if you want to switch the style, do so.

#idname{
  border: 2px solid black;
}

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

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

Run code

If you want to customize other elements with a class classname, and not just #idnameuse:

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

Answer 2

, , - , .

100. 10.

.

:

#idname.classname

110.

---

div#idname.classname

111 ( 1).

---

div[class="classname"]

, 10, - 11.

---

!important

, !important . .

.classname { ...  !important; }

!important 10000, CSS

CSS: CSS

Answer 3

. CSS , .

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

!important, , , , , .

, "" ID CSS , /.

, . class ID.

14 + -: !important, . .

, . - css, .

Answer 4

A small other solution to the problem, which in some cases may help to use

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

I needed it in dragging a little game