Css specificity inheritance and the cascade things you should know

CSS

Specificity, Inheritance, and the Cascade

Things You Should Know

By Moneer [email protected]

Do you think you're good with css?

Have you ever run into the situation where you’re trying to

apply a css style to an element, but it won’t take?

Your page it seems to be ignoring your css,but you can’t

figure out why.

Well Something fishy is at work here.

three things control which css rule applies to a given html element:

Specificity Calculations Inheritance The Cascade

Learning these rules will take you to the next level in your css development.

Specificity

Selector specificity is a process used to determine which rules take precedence in CSS when several rules could be applied to the same element in markup.

Every selector has its specificity.

If two selectors apply to the same element, the one with higher specificity wins.

Specificity hierarchy

Every selector has its place in the specificity hierarchy. There are four distinct categories which define the specificity level of a given selector:

1. Inline styles (Presence of style in document). An inline style lives within your HTML document. It is attached directly to the element to be styled. E.g. <h1 style="color: #fff;">

2. IDs (# of ID selectors) ID is an identifier for your page elements, such as #div.

3. Classes, attributes and pseudo-classes (# of class selectors). This group includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.

4. Elements and pseudo-elements (# of Element (type) selectors). Including for instance :before and :after.

How to Calculate Specificity?There are several ways to calculate a selector’s specificity but we will talk about the easiest one, first lets take a look on this picture :

And for the calculations:

If the element has inline styling, that wins

(1,0,0,0 points)

For each ID value, apply 0,1,0,0 points

For each class value (or pseudo-class or

attribute selector), apply 0,0,1,0 points

For each element reference, apply 0,0,0,1 point

we can generally read the values as if they were

just a number, like 1,0,0,0 is "1000", and 0,1,0,0 is

“100” (so clearly 1000 > 100). The commas are

there to remind us that this isn't really a "base 10"

system, in that you could technically have a

specificity value of like 0,1,13,4 and that "13"

doesn't spill over like a base 10 system would.

Sample calculationsEx1:

Sample calculationsEx2:

Sample calculationsEx3:

Sample calculationsEx4:

Some Specificity Rules

• Rules with more specific selectors have a greater specificity.

• ID selectors have a higher specificity than attribute selectors. For example:

1-#p123{ color:#ddd;}2-P[id=“p123”]{ color:#ccc; }1 more specific than 2

• The last rule defined overrides any previous, conflicting rules. For example, given these two rules

p { color: red; background: yellow } p { color: green }paragraphs would appear in green text yellow background

Important Notes A class selector beats any number of element selectors.

The universal selector (*) has no specificity value (0,0,0,0)

Pseudo-elements (e.g. :first-line) get 0,0,0,1 unlike their pseudo-class

brethren which get 0,0,1,0

The pseudo-class :not() adds no specificity by itself, only what's inside it's

parentheses.

The !important value appended a CSS property value is an automatic

win. It overrides even inline styles from the markup. The only way

an !important value can be overridden is with another !important rule

declared later in the CSS and with equal or great specificity value

otherwise. You could think of it as adding 1,0,0,0,0 to the specificity

value.

Inheritance

The idea behind inheritance is relatively easy to understand.

Elements inherit styles from their parent container.

Not all properties are inherited, but you can force ones to be

by using the inherit value.

For example:

p {margin: inherit; padding: inherit}

How Inheritance Works 1 ?When an element inherits a value from its parent, it is inheriting its computed value. What does this mean? Every CSS property goes through a four-step process when its value is being determined:Specified valueThe user agent determines whether the value of the property comes from a style sheet, is inherited or should take its initial value.Computed valueThe specified value is resolved to a computed value and exists even when a property doesn’t apply. The document doesn’t have to be laid out for the computed value to be determined.Used valueThe used value takes the computed value and resolves any dependencies that can only be calculated after the document has been laid out (like percentages).Actual valueThis is the value used for the final rendering, after any approximations have been applied (for example, converting a decimal to an integer).

How Inheritance Works 2 ?If you look at any CSS property’s specification, you will see that it defines its initial (or default) value, the elements it applies to, its inheritance status and its computed value (among others). For example, the background-color specification states the following:

Name: background-color Value: <color> Initial: transparent Applies to: all elements Inherited: no Percentages: N/A Media: visual Computed value: the computed color(s)

Confusing? It can be. So, what do we need to understand from

all this? And why is it relevant to inheritance?

Let’s go back to the first sentence of this section, which should

make more sense now. When an element inherits a value from

its parent, it inherits its computed value. Because the computed

value exists even if it isn’t specified in the style sheet, a property

can be inherited even then: the initial value will be used. So, you

can make use of inheritance even if the parent doesn’t have a

specified property.

How Inheritance Works 3 ?

properties already have “inherit” as a default value

• border-collapse• border-spacing• caption-side• color• cursor• direction• empty-cells• font• font-family• font-stretch• font-size• font-size-adjust• font-style

• font-variant• font-weight• letter-spacing• line-height• list-style• list-style-image• list-style-type• quotes• text-align• text-indent• text-transform• white-space• word-spacing

The notion of a “cascade” is at the heart of CSS (just look at its

name). It ultimately determines which properties will modify a

given element. The cascade is tied to three main concepts:

importance, specificity and source order. The cascade follows

these three steps to determine which properties to assign to

an element. By the end of this process, the cascade has

assigned a weight to each rule, and this weight determines

which rule takes precedence, when more than one applies.

cascade

ImportanceStyle sheets can have a few different sources:• User agent

For example, the browser’s default style sheet.• User

Such as the user’s browser options.• Author

This is the CSS provided by the page (whether inline, embedded or external)

By default, this is the order in which the different sources are processed, so the author’s rules will override those of the user and user agent, and so on.

Source order

let’s look at the final order, in ascending order of importance:

1. User agent declarations,

2. User declarations,

3. Author declarations,

4. Author !important declarations,

5. User !important declarations.

The Process of ResolutionNow finally the style of an element will be determined by The process of resolution which is employed by the CSS cascade for each property and involves these four steps:

1. For a given property, find all declarations that apply to a specific element.

2. Sort the declarations according to their levels of importance, and origins.

3. Sort declarations with the same level of importance and origin by selector specificity.

4. Finally, if declarations have the same level of importance, origin, and specificity, sort them by the order in which they’re specified; the last declaration wins.

And that it we are doneI hope you find this information usefull

Resources And Further Reading

Assigning Property Values, Cascading, and Inheritance, W3C

CSS3: Cascading and Inheritance, W3C

Selectors Level 3: Calculating a Selector’s Specificity, W3C

The Cascade, SitePoint

Inheritance and Cascade, Dev.Opera

CSS Inheritance, Dorward Online

Cascading Order and Inheritance in CSS, David’s Kitchen

Understanding Style Precedence in CSS: Specificity, Inheritance, and the

Cascade, Van SEO Design

Specifics on CSS Specificity, CSS-Tricks