Name: Utilize Selector Specificity to Control Applied Styles
Uploaded: 2018-09-27T00:37:10-05:00
Description: When selectors conflict, the browser needs to know which property / value combination to paint. Specificity is one of the core concepts of CSS and is important to understand in order to implement deterministic styles. Let's look at the specificity rules and learn the power of each selector.

Set CSS Properties and Values (syntax)

Use Selectors to Style HTML Elements

Utilize Selector Specificity to Control Applied Styles  

Style Elements Using the Cascade 

Apply CSS Styles with Inheritance

Debug CSS with the Chrome Devtools

Understand CSS Layout with the Box Model

Control HTML Elements with Different CSS Units

Manipulate Colors with CSS

Add Backgrounds to HTML Elements

Hide and Show HTML Elements with CSS

Customize CSS Selectors with Pseudo Classes

Modify Font Style in CSS

Positioning HTML Elements using CSS

Use CSS Media Queries to Dynamically Apply Styles

Style a Logo and Navigation on a Website with CSS

Create Dynamic Styles with CSS Variables 

CSS Fundamentals 

When selectors conflict, the browser needs to know which property / value combination to paint. Specificity is one of the core concepts of CSS and is important to understand in order to implement deterministic styles. Let's look at the specificity rules and learn the power of each selector. 

https://app.egghead.io/api/v1/lessons/css-utilize-selector-specificity-to-control-applied-styles/subtitles

Instructor: [00:00] We can target all of our navigation LIs by simply doing LI color blue. As you can see when we refresh, we get them to all be blue. We can add a conflicting style to one LI, the home LI, by giving it a class of home. Now we can target that class by dot home color red. Now when we save and refresh our home LI is now red while all of them are blue.

[00:25] When multiple selectors are targeting the same element, the browser needs to know which one to apply. This is where the cascade and specificity come into play. Element selectors have a specificity value of zero zero one, while classes have zero one zero. Because this value is larger than the element, the home class is going to overrule the LI. That's why it's red.

[00:51] Now let's give our home LI an ID of home. We'll target that by hashtag home, give it a color of gray. Save and refresh and we see that now our red goes to gray. This is because IDs have an even higher specificity of element and classes of one zero zero. This is going to overrule the other two.

[01:13] Even if we added more targeted element selectors to the color red, for example, div UL and LI, the ID still wins. This is because the ID of one zero zero is larger than an element with three elements. As you can see, zero zero three is still smaller.

[01:32] Even when we combine elements with classes to target our LI, when we save and refresh, the ID still wins. This would be like having a one three, which is still smaller than the one zero zero of the ID.

[01:47] It's also good to know that inline styles will beat out IDs, classes, and elements. Give it a color of purple and refresh. This makes our home LI purple. Then something that even beats inline styles is using the important tag. If we go back and put it onto our element selector and refresh, we're back to blue. That's because an important rules all in this case.

Utilize Selector Specificity to Control Applied Styles

Share this video with your friends

Course

CSS Fundamentals