css specificity inheritance and the cascade things you should know
TRANSCRIPT
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