(click anywhere to close)
OPEN MENU

[CSS3] Priorities & Inheritance

category: Website | course: CSS3 | difficulty:

When two selectors target the same element(s), we speak of conflicting styles. So, with all those different possibilities and style rules, how does CSS decide what styles to use (in the end)?

Well, there’s two concepts that play a role here: inheritance (style rules that are automatically applied) and specificity (how specific the selector is).

Inheritance

All HTML elements come with a standard design – a CSS declaration for every known property. These are the same among all modern browsers, and most of those properties are set to the expected settings. For example, text alignment is automatically left for all elements. Setting a CSS property to the value initial will always reset it to what it automatically was.

On top of that, elements can inherit styles from all their parents. Some properties automatically do this, but you can always force it by setting a property to the value inherit. For example, if you make all the text inside a certain element red, you can easily extend these styles to all children nodes by using this value. Now, if you were to change the text colour of that element, all children would automatically follow along!

All properties can have those two values, which also means that they can cause unexpected ‘bugs’. If something doesn’t style the way it should, it’s possible that it automatically inherits styles that overrule whatever you wrote.

Specificity

CSS selects the most specific selector, which depends on two things: placement and content.

Placement

Placement means that, if two selectors are equally specific, CSS chooses the last selector it finds, reading the style sheet from top to bottom.

p {
	color:red;
}

p {
	color:blue;
}
/* All paragraphs will have text colour blue */

Inline styles are read even later by CSS, because they are embedded within the HTML, and always overrule everything. That’s why you need to be careful with inline styles.

Content

There’s actually a little formula you can calculate specificity with, using all elements within a selector. In this case, a higher score means it is more specific, and is more likely to be chosen by CSS as the final declarations. Each component in a selector is given a specificity score according to this table:

Component

In Code

Score

ID Selector

#something

100

Class selector

.something

10

Anything else

something, [something=”something”], …

1

 

The formula is: add up the specificity score of all elements.

For example: p div span has score 3, while #mainStuff span has score 101. Therefore, span elements within the element with ID #mainStuff will be styled according to what belongs to the second selector.

#mainContent p .firstSentence {
	font-family:Helvetica;
}

#mainContent p {
	font-family:Arial;
}

/* Paragraphs within the element with ID mainContent will have Arial as font, 
except for elements within paragraphs with class firstSentence */

The important keyword

There’s one exception. You can boost the importance of a declaration by adding the magic words !important before the closing semicolon. This will tell CSS to ignore all those rules about specifics and inheritance, and just use this attribute.

p {
	color:blue !important;
}

#mainContent p {
	color:red;
}
/* Paragraphs will have a blue text colour */

I am, however, against using this. A good CSS structure should prevent using this, and has better performance, readability and scalability. If you find yourself adding this keyword to something, there’s no turning back – your style sheet will keep growing on important keywords, until it’s all a big mess. If you find yourself eager to use it, try to think of a better way to structure your code to prevent it.

CONTINUE WITH THIS COURSE
Test your knowledge with the quiz!
What is the definition for elements automatically inherit some property values from their parents or default browser settings?
A
Placement
B
Inheritance
C
Specificity
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)