CSS Specificity

Question

Assuming this mark-up:

<html class="fr">
<head>
</head>
<body>
 <div class="class1">
 </div>
</body>
</html>

Will this:

.fr .class1 {
  background-color: blue;
}

take precedence over this:

.class1 {
  background-color: red;
};

Edit:

To those wondering, yes I had tried :) I didn't explain the full problem here and discovered the issue after this post.

Basically, I had two styles in the same stylesheet:

.fr .class1 {
  font-size: 12px;
}

.class1 {
  font-size: 12px;
  line-height: 18px;
  height: 80px;
}

While technically .fr .class1 takes precendence over .class1, this doesn't mean the element replaces all of .class1's styles with .fr .class1's styles. Instead, it looks at .fr .class1 for styles first, then .class1. This is "obvious" but this was why I was running into difficulty.

My goal was to remove styles by using .fr .class1's precedence over .class1. In order to do this, I realized I need to set values to 0 or neutral values:

Example)

.fr .class1 {
  font-size: 12px;
  line-height: 0;
  height: auto;
}

Otherwise, it will cascade to .class1 and fill these styles in.

@Cubed: But given the history of browser bugs it is best to check the standard and then try it to make sure the browsers you care about follow the standard in the ways you need them to. — mu is too short
– mu is too short, Commented Aug 28, 2011 at 3:15
As you've found out, CSS applies styles for each property independently, so sometimes re-setting the original value is neccessary. To facilitate this, CSS3 introduced the initial keyword. — user123444555621
– user123444555621, Commented Aug 28, 2011 at 6:45

Douglas · Accepted Answer · 2011-08-28 03:13:21Z

7

Yes, since .fr .class1 references two class names and .class1 only references one, the first is more specific. The rules in the CSS standard are here.

answered Aug 28, 2011 at 3:13

Douglas

37.8k9 gold badges80 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jason Gennaro · Accepted Answer · 2011-08-28 03:15:00Z

1

Yes because the first example has two class names compared to one.

Example: http://jsfiddle.net/jasongennaro/yQvAF/

Try using this CSS specificity calculator: http://www.suzyit.com/tools/specificity.php

answered Aug 28, 2011 at 3:15

Jason Gennaro

34.9k9 gold badges67 silver badges86 bronze badges

Comments

user123444555621 · Accepted Answer · 2011-08-28 07:01:57Z

1

In response to the edit:

CSS applies the values to each property individually. Block grouping does not matter. So

.fr .class1 {
  font-size: 12px;
}

.class1 {
  font-size: 12px;
  line-height: 18px;
  height: 80px;
}

is the same as

.fr .class1 {
  font-size: 12px;
}
.class1 {
  font-size: 12px;
}
.class1 {
  line-height: 18px;
}
.class1 {
  height: 80px;
}

which, as .fr .class1 is more specific than .class1 alone, is the same as

.fr .class1 {
  font-size: 12px;
}
.class1 {
  line-height: 18px;
}
.class1 {
  height: 80px;
}

answered Aug 28, 2011 at 7:01

user123444555621

154k27 gold badges118 silver badges126 bronze badges

1 Comment

djreed Over a year ago

Precisely what I eventually discovered. Thanks for outlining this so clearly!

Collectives™ on Stack Overflow

CSS Specificity

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related