CODEWITHSUNDEEP
htmlclass
Cosytyle
Cosytyle

Reputation: 57

Multiple class with same style but different value

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?

Upvotes: 0

Views: 46

Answers (3)

kat1330
kat1330

Reputation: 5332

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.

Upvotes: 3

Sahil Dhir
Sahil Dhir

Reputation: 4250

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>

Upvotes: 0

Sankar
Sankar

Reputation: 7107

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>

Upvotes: 0

Related Questions