CSS Specificity Rules

Question

I am using twitter bootstrap (TB) and it seems like their CSS Rules are taking precedence when they shouldn't. I created this fiddle to show the problem:

http://jsfiddle.net/whoiskb/Za2TB/

HTML

<div class="teaser">
     <h1 class="teaserText">Text text text <label>Label</label> Text <label>Activities</label></h1>
</div>

CSS (plus an external link to twitter bootstrap)

div.teaser h1.teaserText {
     font-size: 100px;
     font-weight: 100;
     color: black;
     line-height: 90px;
     font-family: "Trebuchet MS", "Arial Black", "Impact", "Arial";
     text-transform: uppercase;
}

div.teaser h1.teaserText label {
     color: #FCCE00;
}

From what I understand about the specificity rules, the rules defined for label in TB should only get a value of 1 since html selectors get a value of 1. My class should have a value of 23 since I have 3 html selectors and 2 class selectors which should get a value of 10 each. As you can see in the fiddle though the label selector in the TB css definition is taking precedence.

Could someone explain what I am missing here?

BTW, I know I can use the !important tag to resolve this, I am just trying to get a better understanding of CSS Specificity rules.

I'm confused. Obviously the second style is more specific, as it is the exact same style with an additional "label" at the end? — gotohales, Commented Dec 13, 2012 at 16:32
First I need to know what you're expecting. What I'm seeing in the fiddle is that TEXT TEXT TEXT is black color and 100px size. Label and Activities is normal font size and yellow. i.e. it's picking up the font-family, text-transform, and color. — Mike Earley, Commented Dec 13, 2012 at 16:35
"I know I can use the !important tag to resolve this" - not in my code you can't. Also !important isn't a tag, and I don't think it'll make any difference here. — Paul D. Waite, Commented Dec 13, 2012 at 16:43
I was expecting the small yellow label to also pick up the same font size, height, etc.... Christoph explained why and where I misunderstood the rules. Thanks everyone. — Kevin, Commented Dec 13, 2012 at 19:22

Christoph · Accepted Answer · 2012-12-13 17:08:33Z

Specificity rules only apply if different Rules target the **same element (as for your color of the label), not if different elements are targeted (even if some styles of that element would be inherited).

You have one stylerule applied to labels, and that is the color, which gets applied correctly. All your other styles are applied to another element, so the TB styles targeting the label directly are preferred of course.

Some styles are inherited (like font-size and line-height in your example), but they are overridden as soon as there is a rule targeting your element directly. TB overrides your font-size and line-height with the following rule:

label, input, button, select, textarea {
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
}

You could fix this easily by declaring:

div.teaser h1.teaserText label {
     color: #FCCE00;
     font-size:inherit;
     line-height:inherit;
     /* and so on */
}

"Specificity rules only apply if different Rules target the same element" Exactly. — BoltClock, Commented Dec 13, 2012 at 17:05

Paul D. Waite · Accepted Answer · 2012-12-13 16:38:15Z

I'm not exactly clear on what you think the problem is, but taking a guess:

CSS specificity decides what happens when there are two or more rules for one CSS property for a given element.

So, given this HTML:

<label class="myLabel">Hello!</label>

And this CSS:

label {
    color: red;
    font-size: 24px;
}

.myLabel {
    color: blue;
}

The label will be blue, because .myLabel is a more specific selector than label.

However, the label will also have a font size of 24 pixels, because the .myLabel block doesn't include a rule setting the font-size property.

Collectives™ on Stack Overflow

CSS Specificity Rules

2 Answers 2

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Related