Multiple class with same style but different value - html

Question

I have something like
.padding-top {
10px;
}
.padding-upper {
1px;
}
<div class="padding-top padding-upper"></div>
Which will be prioritized? Is it random or is there a chronological order here?
I have tested the code and checked that there is only 1px applied, even if I try to interchange the order of the like so:
<div class="padding-upper padding-top"></div>
Only 1px is applied. Can someone enlighten me on this one?

Answer 1

Yes, it is applied by order. Try this because your classes are not defined properly (missing padding properties):
.padding-top {
padding-top: 10px;
}
.padding-upper {
padding-top: 1px;
}
div {
height: 100px;
background-color: red;
}
<div class="padding-top padding-upper"></div>
It will be applied by chronological order how you declared classes. Because you have padding-top class first declared it will be overwritten. It will be overwritten by class padding-upper which is declared after.
If you change the order of declaration, style of div element will be changed too. But if you change order in class attribute then style will remain same.
But if you have the situation that you want to keep original value you can achieve with !important for that property:
.padding-top {
padding-top: 10px !important;
}
.padding-upper {
padding-top: 1px;
}
Now order for padding-top property doesn't matter. 10px will be always applied because it is decorated with !important.

Answer 2

Actually, The css will overrides based on the specificity level. In the below snippet. div.padding-upper is more specific than others. For more info: https://www.w3.org/TR/CSS21/cascade.html
.padding-top {
padding:10px;
width:20px;
height:20px;
background:red;
}
.padding-upper {
padding:1px;
width:20px;
height:20px;
background:red;
}
div.padding-upper {
padding:100px;
width:20px;
height:20px;
background:red;
}
<div class="padding-top padding-upper"></div>
But in your case, both selectors are in same level. So, the recent rule will be applied.
.padding-top {
padding:10px;
width:20px;
height:20px;
background:red;
}
.padding-upper {
padding:1px;
width:20px;
height:20px;
background:red;
}
<div class="padding-top padding-upper"></div>
If you want to override that above default behavior you have to use !important.
.padding-top {
padding:10px !important;
width:20px;
height:20px;
background:red;
}
.padding-upper {
padding:1px;
width:20px;
height:20px;
background:red;
}
<div class="padding-top padding-upper"></div>

Answer 3

Order does matter. The last declared value of multiple occurrence will be taken.
Css works the way it is written. So if you are taking two classes in your html:
<div class="padding-upper padding-top"></div>
The class which is written at last in the css:
.padding-top {
10px;
}
.padding-upper {
1px;
}
Will execute first no matter how you interchange them in your html.
Below is a simple example of the same-
.demo {
color: blue;
}
.demo1 {
color: red
}
.demo2 {
color: green
}
<div class="demo demo2 demo1 ">Hello World!!</div>