16. Specificity in CSS - Full stack web development Tutorial Course

In this FullStackWebDevelopment tutorial video, In this video, we are going to learn about CSS specificity. #CSS #Specificity is the set of the rules applied to CSS #selectors in order to determine which style is applied to an element.

The more specific a CSS style is, the higher point value it accrues, and the likelier it is to be present on the element's style. Every selector has its place in the specificity hierarchy. There are four categories which define the specificity level of a selector:

IDs - An ID is a unique identifier for the page elements, such as #navbar.
Classes, attributes and pseudo-classes - This category includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.

Elements and pseudo-elements - This category includes element names and pseudo-elements, such as h1, div,: before and: after.

SPECIFICITY Rules:

Equal specificity: the latest rule counts - If the same rule is written twice into the external style sheet, then the lower rule in the style sheet is closer to the element to be styled, and therefore will be applied:

ID selectors have a higher specificity than attribute selectors
A class selector beats any number of element selectors
.
----------------------------

Week 1: Day 3
Section 2: Getting Started With CSS
Tutorial 16: Specificity in CSS

----------------------------
Do subscribe and hit Bell Icon
----------------------------

Follow us in social media handles for opportunities and code related support.

Be our Exclusive student / Patreon to receive Exclusive Coding Tips and Freelancing opportunities

----------------------------

Got a question on the topic? Please share it in the comment section below and our experts will answer it for you.

[prachipancholi]

specificity. I am in love with this word now. :-))) Great videos. Now I will comment on the last video of this playlist, stating it's done.

[HamdiElShahat]

Although I'm not a native English speaker, I catch on really well. And the content is excellent and clear. Lots of thanks.

[TRTIM]

you are a master, im watching all the videos, i know they only have a few views, but i appreciate all the tutorials, they are very helpful and the best ones on youtube right now!

[nabeeljaffar]

Well explained !! I was confused b4. U've done a hardwork. Subscribing u to appreciate

[artianrika]

that was deeep, thanks, awsome so far👌

[devanshibhimjiyani]

Thank you for dubbing over that intro, this is much better

[ashishkumar-fkrh]

omg... I am not the only one having a hard time pronouncing that word...

[quocdattranquoc]

why is the <li> in <h3> convert yellow?, help me, pleased!

[krishmaniar]

at 8:02 in the video, you spelled container wrong when selecting the class (you said .conatiner h1)

[zh]

What is class, id, element, how do we differentiate them?...thank you for the video🙏

[aaronsajialexandercs]

i like how u nuked the entire calculator system by just using !important syntax

[TechHunt]

Well I got the right answer could I have that dollar??? we placed a bet I guess😋

[ashrafulfuad]

really what you pronounce specificity it does not matter you made the lesson humorous that is important

[Zomeone]

9:18 why mathematics? Is it important as full stack web developer. Aaah i really felt tired when you're saying value value value and this calculator thing

[Rabits]

i also forgot how to say it "specificity"