Bootcamp Notes – Day 10 (Thu) – The Cascade: Specificity and Selectors

One HTML page can have many different sources for styles: multiple external stylesheets, an internal stylesheet, inline styles, user-agent stylesheet (browser defaults), user stylesheet. CSS is meant to be flexible and support all these options. When there are rules that compete against each other, the cascading algorithm in CSS determines how to sort them and figure out which ones have higher priority.

CSS Specificity: a measure of a selector’s level of specificity; higher specificities have higher priority in the cascade.

Element/type, class & id are three kinds of selectors – they define what HTML elements to target to apply style declarations

Inline styles can also be considered a kind of selector – an inline style is created directly on an element – it directly selects it.

Inline styles have the highest level of specificity.

Look at this example – Inline style VS internal stylesheet

Notice that the inline <h1> wins when we view the page in a browser! We get red text!

Look at this example – Internal vs external stylesheets

We get red in the above example! If rules conflict with each other the last one wins!

This example below would be green color winning to display!

Basically when you have more then one stylesheet: external or internal. You can think of it as if they are all taken together and made into a single stylesheet in the order in which they appear. And if they have any conflicting values for the same selector and property then the last one read will be used.

Specificity: INLINE STYLES, ELMENT, CLASS, ID

 

 

 

The Cascade: Specificity and Selectors – Part 2

You can apply the same ruleset to multiple selectors at once. So we have a shortcut.

Instead of the long way like this:

Use pseudo-classes to narrow down elements to those in a particular state. Not used on their own, but attached to other selectors.

Syntax:   selector:pseudo-class

Examples:

• div:hover – selects div currently being hovered over
• input:focus -selects input currently in focus
• a:visited – selects all anchor links that have been previously clicked on
• .my-class:hover – selects element with my-class class when hovered over

You can choose elements based on what attributes they contain. Specify attribute name only, or include the value. Not used on their own, but attached to other selectors.

Syntax: selector[attribute]

Examples:

• div[lang] – selects all div elements with a lang attribute
• input[type=”submit”] – selects input element with a type of “submit” only
• .my-class[required] – selects element with my-class class and required attribute

Combinators allow you to combine multiple selectors together. There are four of them:

1. descendant selector (space)
2. child selector (>)
3. adjacent sibling selector (+)
4. general sibling selector

Now look at the chart below, you can see by the point system;

form > input[required] wins the points VS input:focus

CSS INHERITANCE

Some (not all) CSS properties are inherited from the parent element to child elements.

Additional Resources