Css specificity inheritance and the cascade things you should know

CSS
Specificity, Inheritance, and the Cascade
Things You Should Know
By Moneer Kamal
Moneerkamalprog@gmail.com

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.

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 value
The user agent determines whether the value of the property comes from a style
sheet, is inherited or should take its initial value.
Computed value
The 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 value
The 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 value
This is the value used for the final rendering, after any approximations have been
applied (for example, converting a decimal to an integer).

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.

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

Importance
Style 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 Resolution
Now 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 done
I 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

Css specificity inheritance and the cascade things you should know

More Related Content

What's hot (20)

Viewers also liked (14)

Similar to Css specificity inheritance and the cascade things you should know (20)

Recently uploaded (20)

Css specificity inheritance and the cascade things you should know