Does Repeating a Classname in a CSS Rule Increase Its Priority

Does repeating a classname in a CSS rule increase its priority?

This isn't good practice because you have to go to the spec to confirm it, but interestingly enough it will have an effect.

Oddly enough repeating a class on a CSS declaration will boost its specificity!

I didn't believe it, but if you consult the CSS spec, there is nothing that precludes repeating a class to increase specificity:

• 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)

So in your example:

.menu-item.dark {} 
/* a=0 b=0 c=2 d=0 -> specificity = 0,0,2,0 */
li.menu-item-special.menu-item-special.menu-item-special
/* a=0 b=0 c=3 d=0 -> specificity = 0,0,3,1 */

So that latter actually wins!

---

To add more context, specificity rules are hierarchical, so below #foo beats your rule, as does !important:

#foo
/* a=1 b=0 c=0 d=0 -> specificity = 0,1,0,0 */
li.menu-item-special.menu-item-special.menu-item-special
/* a=0 b=0 c=3 d=0 -> specificity = 0,0,3,1 */

Note: I've only tested this on Chrome and IE8. Because of its undefined nature some browsers may act differently.

Is it possible to give one CSS class priority over another?

1. specify a more specific selector, eg prefix an ID before it or prefix the nodename before the class
2. assign it after the other class
3. if two classes are in separate files, import the priority file second
4. !important

!important is the lazy way, but you really should go for #1 to avoid important-ception. Once you've added one !important you can't use it to make some other rule even more important.

Css: does repeating the same class on an element change any behavior?

No, none whatsoever, unless you have the habit of using the class attribute:

[class="class1 class2"] {
    /* ... */
}

instead of:

.class1.class2 {
    /* ... */
}

which is terrible practice, of course.

---

Also, although your question isn't tagged javascript, note that if only the first instance of a class is removed and an unlimited number added, say:

function addClass(element, cls) {
    element.className += ' ' + cls;
}

but

function removeClass(element, cls) {
    return element.className.replace(cls, ' ');
}

this will cause problems in more ways than one.

Multiple CSS Classes: Properties Overlapping based on the order defined

It depends on which one is declared last in your stylesheet. For example,

.one { border: 6px dashed green }
.two { border: 6px dashed orange }

vs

.two { border: 6px dashed green }
.one { border: 6px dashed orange }

class overrule when two classes assigned to one div

Multiple classes can be assigned to a div. Just separate them in the class name with spaces like this:

<div class="rule1 rule2 rule3">Content</div>

This div will then match any style rules for three different class selectors: .rule1, .rule2 and .rule3.

CSS rules are applied to objects in the page that match their selectors in the order they are encountered in the style sheet and if there is a conflict between two rules (more than one rule trying to set the same attribute), then CSS specificity determines which rule takes precedence.

If the CSS specificity is the same for the conflicting rules, then the later one (the one defined later in the stylesheet or in the later stylesheet) takes precedence. The order of the class names on the object itself does not matter. It is the order of the style rules in the style sheet that matters if the CSS specificity is the same.

So, if you had styles like this:

.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

Then, since both rules match the div and have exactly the same CSS specificity, then the second rule comes later so it would have precedence and the background would be red.

---

If one rule had a higher CSS specificity (div.rule1 scores higher than .rule2):

div.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

Then, it would take precedence and the background color here would be green.

---

If the two rules don't conflict:

.rule1 {
    background-color: green;
}

.rule2 {
    margin-top: 50px;
}

Then, both rules will be applied.

Can one CSS file take priority over another CSS file?

It depends on how you set them in your header. So something like this will work:

<link rel="old stylesheet" href="path/to/style.css" />
<link rel="newer stylesheet" href="path/to/style.css" />
<link rel="newest stylesheet" href="path/to/style.css" />

The last one will be picked up.

And an helpful link about stylesheets here:
http://www.w3.org/TR/html401/present/styles.html#h-14.3.2

See also: Precedence in CSS if the above doesn't work for you.

Hope it is clear.

CSS classes, order of precedence

Specifying the element along with the class will give the selector priority over the parent definition. Try setting p.note { instead.

http://jsfiddle.net/3zfoqtd4/

What are the priorities among CSS selectors

The gory details in the spec are actually reasonably readable. In summary:

1. !important rules and inline style rules win most.

2. Otherwise, normally the more specific wins. #id is a more specific selector than .classname is a more specific selector than tagname.

3. Where rules are equally specific, the one declared last wins.

There is no particular reason why this ‘shouldn't happen’. It's normal to specify a broad-brush rule and then add a more specific rule to target one case; multiple same-property rules on a single element are not unusual or undesirable.

---

Related Topics