css when using multiple class for same css property

Question

I don't know well about css rules. I've multiple classes with same property like "width".
When setting these classes to the Html tag, whose width property is set to that tag?
For example.

.main{
   width:600px;
   border:1px solid #000;
}

.rule1{
  width:400px;
  min-height:10px;
}

.rule2{
  width:300px;
  background:#aaa;
}

<div class="main rule1 rule2">
  Which rule's width property is set?
</div>

It depend on selector's priority / specificity: https://stackoverflow.com/questions/4072365/css-understanding-the-selectors-priority-specificity/4072434#4072434 — Robin Huy, May 31 '17 at 03:10

Kiran Dash · Accepted Answer · 2017-05-31T02:57:26.750

4

.rule2{
  width:300px;
  background:#aaa;
}

This one defines the width for the tag since it comes at the end. When you are having multiple classes for a tag, and a common style for them all then it is always the last rule which will overwrite all the previous rules.

edited May 31 '17 at 02:57

answered May 31 '17 at 02:56

Kiran Dash

4,816
12
53
84

Is the last rule set to the tag? – Andrew Li May 31 '17 at 02:57
Yes. The last rule in CSS will be set to the tag and thus define the width to 300px; – Kiran Dash May 31 '17 at 02:58
When setting with "style" property,
, the rule2 is set?
– Andrew Li May 31 '17 at 02:59
No in that case the inline style will overwrite all other rules. – Kiran Dash May 31 '17 at 03:01
You are welcome Andrew. Glad to help. And if this solves your issue, then feel free to mark your question resolved by checking one of the answer as the correct one. – Kiran Dash May 31 '17 at 03:02
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/145503/discussion-between-andrew-li-and-kiran-dash). – Andrew Li May 31 '17 at 03:07

score 1 · Answer 2 · answered May 31 '17 at 03:01

CSS stands for Cascading Style Sheets, which means that all the rules defined for an element apply, and if there are several identical properties the last defined wins.

So, your min-height from .rule1 is applied, as well as background from the second rule is applied. However, when it comes to width (which both rules have), the last one defined is applied: width:300px.

Try putting .rule2 before .rule1 in your CSS file to see what it does!

Talent Developer · Answer 3 · 2017-05-31T03:24:14.063

The last rule wins when setting the multiple rules. But if there is inline "style" , "style" wins.

A selector's specificity is calculated as follows:

    count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
    count the number of ID attributes in the selector (= b)
    count the number of other attributes and pseudo-classes in the selector (= c)
    count the number of element names and pseudo-elements in the selector (= d)
    The specificity is based only on the form of the selector. In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD.

Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.

If the specificities are equal, then CSS 2.1 Section 6.4.1 comes into play:

    Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

Note that this is talking about when the style is defined, not when it is used. If classes .a and .b have equal specificity, whichever is defined last in the stylesheet(s) wins. ...

and ... will be styled identically, based on the definition order of .a and .b.

score 0 · Answer 4 · answered May 31 '17 at 03:02

0

you can overwrite the default behavior by adding

.rule1 {
    width:400px !important;
    min-height:10px;
}

This will make sure that this rule's width is used.

answered May 31 '17 at 03:02

Chris Pierce

706
5
9

score 0 · Answer 5 · answered May 31 '17 at 03:12

Simple, later one will overwrite the previous one for the same attribute like width or background color.

Note in main you have a border, and never been overwritten by rule1 and rule2 so it keeps the 5px solid red border.

Note that width:200px; is applied since it is the last one define width, so it overwrite previous (unless you use !important in previous one, even with !important, later one will overwrite previous !important)

I think you get the idea now!

Just define them in one css rule:

.main{
  width:200px;
  background: yellow;
  min-height:10px;
  border:5px solid red;
}

.main{
   width:1000px;
   border:5px solid red;
   background: red;
}

.rule1{
  width:2000px;
  min-height:10px;
  background: green;
}

.rule2{
  width:200px;
  background: yellow;
}

<div class="main rule1 rule2">
  Which rule's width property is set?
</div>

score 0 · Answer 6 · edited Jun 03 '17 at 19:48

0

.rule2{width:300px; background:#aaa;}

This is last css rule its override all css class rule, finally width:300px is compile...

edited Jun 03 '17 at 19:48

Rook

5,734
3
34
43

answered May 31 '17 at 06:01

Gaurav Panwar

41
2
14

css when using multiple class for same css property

6 Answers6