What Are the Priorities Among CSS Selectors

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.

Understanding CSS selector priority / specificity

I'll just toss in a link to the CSS 2.1 spec itself, and how browsers are supposed to calculate specificity:

CSS 2.1 Section 6.4.3:

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:

4. 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. <p class="a b">...</p> and <p class="b a">...</p> will be styled identically, based on the definition order of .a and .b.

Order of precedence of CSS rules

It is still blue. Attribute selectors are on the same level as classes. For more information see: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Priority of Selector in CSS Rules

You should take a deeper look at specificity:
http://www.standardista.com/css3/css-specificity/

#id selector = 100 "points"

.class and :pseudo-class selectors = 10 "points"

In your specific case, this will do the trick:

#tbl td:nth-child(odd){
    background-color:#F0FFE2;
}
#tbl tr:hover td.cell {
    background-color:#FFA270;
}

Prioritize parts of CSS selectors

What you are looking for is called Specificity. The linked article explains it very well.

Basically, which selector has precedence is based on how specific that selector is. As a somewhat intuitive example, .red.fruit is more specific than just .fruit since it has two class names. Therefore, in your CSS code, even if the .fruit selector comes after .red.fruit, the more specific one takes precedence.

There is more to it than just having multiple class names, though. As you can imagine, different types of selectors have different levels of precedence. For example, ID selectors are considered extremely specific since only a single element can (well, should) have the given ID. In general, this order goes like this, from most specific to least:

Inline Styles > ID Selectors > Class, attribute, and pseudo-class Selectors > Elements and pseudo-elements

Definitely read the article for more info.

---

Now, all that said, I think it's worth mentioning that as a good rule of thumb, you should aim to make your selectors as least specific as possible. In other words, try not to use ID Selectors or inline styles where you can avoid it, and use the least number of classnames necessary to select the elements you want.

Following this principle allows your CSS to be more flexible in the long run and easier to read.

How to prioritize a CSS class?

With CSS Specificity, you should just override the more specific selector with your own.

.panel-default > .panel-heading .badge.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

Edit: Other options can include:

1. Removing/Altering the offending CSS file (difficult with bootstrap, but doable, and maintenance headache if you decide to update bootstrap.css)
   
   
   • Update/remove offending selectors
   • Adding :not() selector to avoid certain scenarios
2. Altering your HTML Structure so that it does NOT follow the offending CSS selectors.
   
   
   • Changing class names and/or using new ones
   • Inserting/Deleting additional nested divs/elements (to avoid > direct-child selector)

Thankfully, if you have lots of classes to update, a smart regex replace is your best friend, but that's another topic.

CSS priorities and targeting specific elements

Why would the second selector take style preference over the first?

Because the second selector is more specific than the first. The first contains one class and one type selector while the second has one class and two type selectors.

To calculate specificity, think of an selector as consiting of four numbers, all starting at (0,0,0,0)

• Inline styles have the highest specificity and would take the place of the first number (1,0,0,0).
• ID's count as the second number (0,1,0,0)
• Classes, pseudo-classes (other than :not()) and attribute selectors count as the third number (0,0,1,0)
• Type selectors and pseudo-elements - e.g. div {} or ::after{} count as the fourth (0,0,0,1)

Also:

• The universal selector * has no effect on a selectors specificity.
• Combinators like +, ~ and > also have no effect on specificity.
• !important rules almost always take precedence; though they don't affect the four numbers associated with a selectors specificity. Only another !important rule can override a previously defined one. The exception is when the previously defined !important rule has a more specific selector. Here, the normal rule of specificity (described above) apply.

---

Related Topics