CSS Specificity

If there are two or more CSS rules that point to the same element, the selector with the highest specificity value will «win», and its style declaration will be applied to that HTML element.

Think of specificity as a score/rank that determines which style declaration is ultimately applied to an element.

Look at the following examples:

Example 1

In this example, we have used the «p» element as selector, and specified a red color for this element. The text will be red:

Example 2

In this example, we have added a class selector (named «test»), and specified a green color for this class. The text will now be green (even though we have specified a red color for the element selector «p»). This is because the class selector is given higher priority:

Example 3

In this example, we have added the id selector (named «demo»). The text will now be blue, because the id selector is given higher priority:

Example 4

In this example, we have added an inline style for the «p» element. The text will now be pink, because the inline style is given the highest priority:

Specificity Hierarchy

Every CSS selector has its place in the specificity hierarchy.

There are four categories which define the specificity level of a selector:

1. Inline styles — Example:
2. IDs — Example: #navbar
3. Classes, pseudo-classes, attribute selectors — Example: .test, :hover, [href]
4. Elements and pseudo-elements — Example: h1, ::before

How to Calculate Specificity?

Memorize how to calculate specificity!

Start at 0, add 100 for each ID value, add 10 for each class value (or pseudo-class or attribute selector), add 1 for each element selector or pseudo-element.

Note: Inline style gets a specificity value of 1000, and is always given the highest priority!

Note 2: There is one exception to this rule: if you use the !important rule, it will even override inline styles!

The table below shows some examples on how to calculate specificity values:

Selector	Specificity Value	Calculation
p	1	1
p.test	11	1 + 10
p#demo	101	1 + 100
	1000	1000
#demo	100	100
.test	10	10
p.test1.test2	21	1 + 10 + 10
#navbar p#demo	201	100 + 1 + 100
*	0	0 (the universal selector is ignored)

The selector with the highest specificity value will win and take effect!

Consider these three code fragments:

Example

A: h1
B: h1#content
C:

Heading

The specificity of A is 1 (one element selector)
The specificity of B is 101 (one ID reference + one element selector)
The specificity of C is 1000 (inline styling)

Since the third rule (C) has the highest specificity value (1000), this style declaration will be applied.

More Specificity Rules Examples

Equal specificity: the latest rule wins — If the same rule is written twice into the external style sheet, then the latest rule wins:

Example

ID selectors have a higher specificity than attribute selectors — Look at the following three code lines:

Example

the first rule is more specific than the other two, and will therefore be applied.

Contextual selectors are more specific than a single element selector — The embedded style sheet is closer to the element to be styled. So in the following situation

Example

the latter rule will be applied.

A class selector beats any number of element selectors — a class selector such as .intro beats h1, p, div, etc:

Example

The universal selector (*) and inherited values have a specificity of 0 — The universal selector (*) and inherited values are ignored!

Источник

CSS Inheritance, Cascade, and Specificity

Now that you’re starting to get used to using some basic CSS rules, it’s time to start learning the «big concepts» of CSS. Inheritance, the Cascade, and Specificity are the big three. Understanding these concepts will allow you to write very powerful stylesheets and also save time by writing fewer CSS rules.

Inheritance

In CSS, some styles are inherited down the HTML document tree while others are not.

While this can be confusing, the principle behind it is actually designed to allow to write fewer CSS rules.

Inherited Styles

Styles that are inherited are generally related to the styling of the document text.

The font property is inherited. This is why we generally use the element to attach our font styles.

The body element in our HTML is the parent of all of our other HTML elements (excluding the section). Setting the font property on the body element allows the rest of the document to inherit the font rule.

Using the rule above, all text (unless we specify otherwise) will be 14px with an 18px line height and be Helvetica or Verdana.

Styles That Are Not Inherited

Styles that are not inherited are usually related to the appearance of elements.

For example, the border property is not inherited, because it would not make sense. Remember what happens when we used the universal selector to set the border property?

Inheritance Reference Page

In general, you can just use common sense to figure out if a property is inherited or not. Think to yourself, «Would it make sense for this property to be inherited?»

If simple reasoning fails, the following CSS reference page lists many CSS properties. The right column indicates whether or not the property is inherited.

Specificity

CSS rules often conflict with one another. In fact, this is what we want. The trick is understanding how conflicting rules will apply.

Specificity is one of the ways that conflicting rules are applied.

Selectors have different values of importance (or specificity). Here is the short list (listed in order of importance):

If multiple CSS rules conflict with one another, the most important or specific selector is the one that will apply.

Calculating Specificity Level

Usually, we combine different types of selectors in our CSS to make the rules. We can use a relatively simple technique to rate the specificity level of each rule.

Assume we have the following HTML snippet:

Now assume we have the following CSS rules (line numbers added for clarity):

1. div < color: red; >2. div#nav < color: blue; >3. div.links < color: lime; >4. body div#nav < color: green; >5. body div#nav ul li < color: aqua; >6. body div#nav ul li.active

There is a simple scoring system for each style that you plug into a three-value layout like this:

Here’s how the scoring system works:

1. Add one to A for each ID in the selector
2. Add one to B for each class or pseudo class in the selector
3. Add one to C for each element name
4. Read the result as a three-digit number

So, The CSS rules 1-3 in the above code all apply to the same div tag. Which one wins?

1. div < color: red; >/* 0 - 0 - 1 */ 2. div#nav < color: blue; >/* 1 - 0 - 1 */ 3. div.nav < color: lime; >/* 0 - 1 - 1 */

As we can see, the div#nav selector wins, because it is the most specific. The text color in the div will be blue.

For those of you that are not so mathematically inclined, there’s always this graphical method.

Cascade

We’ve already talked about how there can be many different sources of CSS styles. How do we know which one will be used?

In CSS, styles sheets cascade by order of importance. If rules in different style sheets conflict with one another, the rule from the most important style sheet wins.

Below is a list of possible sources of a CSS rule. They are listed by order of importance. As the creator of the style sheet, you’re the author.

1. Author inline styles
2. Author embedded styles (aka: internal style sheets)
3. Author external style sheet
4. User style sheet
5. Default browser style sheet

We’ve already seen the cascade in action. All browsers have a default style sheet, which is designated as the least important.

Whenever we define a CSS rule, like font-family, we are actually overriding a default browser style sheet rule. This is the cascade in action.

What happens when conflicts occur?

There may be times when two or more declarations are applied to the same element. It is also possible that there may be a conflict between them. When conflicts like this occur, the declaration with the most weight is used. So, how is weight determined?

The Cascade Rules

1. Find all declarations whose selectors match a particular element.
2. Sort these declarations by weight and origin
3. Sort the selectors by specificity
4. Sort by order specified

For a complete description of these rules, see What happens when conflicts occur?

CSS Order Matters

In CSS, the order in which we specify our rules matters.

If a rule from the same style sheet, with the same level of specificity exists, the rule that is declared last in the CSS document will be the one that is applied.

An example will illustrate this best.

In the code above, we have created rules for paragraphs to be three different colors. Clearly, these rules conflict with one another.

Rule #3 is the most specific because it specifies all paragraphs that also have the class attribute value of intro .

Rules #1 and #4 conflict. They are from the the same style sheet and they have the same level of specificity. If all else is equal in the cascade, we sort by order specified.

Rule #4 is declared last in the CSS document and therefore, overrides the previously declared Rule #1.

Источник