Understanding Specificity in CSS

Hello guys! Welcome to our series, CSS.

 In our last segment we saw important properties of CSS.

How Important works and when it was checked in different scenarios, how it behaves in different scenarios.

Even that we had seen.

Our today’s segment is on Specificity.

What is Specificity? First of all, we will understand the Specificity and after that we will move with its practicality, so that we can better understand it.

So, guys, today’s segment is very important with regards to the interview.

If you apply for the post of web-designer or web-developer in future, then there is a big possibility of getting tricky questions on Specificity.

Because this is such a segment where more logical Question can come.

 So, 1^st of all we will understand what is Specificity.

Specificity is the way which helps the browser to decide which property value is most relevant for the element. If we try to understand the example, it is that.

 If I have taken any element like div, p and span anything we have taken.

And on one element I apply more than one CSS property.

So, which CSS property will be actually applicable?What do we identify this with? With Specificity.

Specificity helps our browser to make the decision.

If one thing has been given more than one styling or CSS properties has been applied.

 So, which property has to be actually selected.

With Specificity, the browser identifies this.

Here few rules have been written.

The CSS Specificity is important only when various selectors are affecting the same element.

Now, this happens here. For example, we have taken an element.

We have given it an ID; Class and it is itself an element.

 If I give CSS through an element.

 For example, there is div, I give CSS with div element.

To the same element I have given class and I will take class and give CSS.

Then I have given ID, then I will give CSS by taking ID.

Now, our browser will be confused here as there are 3 different CSS have been given for CSS purpose, from those CSS, which one has to be actually selected.

So, this question arises to the browser to identify.

So, with Specificity, we will get this answer.

Next, when 2 or more selectors have equal Specificity value, then the latest one will be considered.

Let’s say that I have applied to 2 class to one division.

So, which class value will be applied? Whichever class comes later.

 If we ger down in CSS, line by line.

From our view whatever will come down, will come later.

 In CSS terms that is called the latest.

 In our terms whichever comes later and in CSS terms whichever comes latest, that CSS our browser will consider.

Next universal selectors, means, the selector with a star.

 Universal means apply the CSS to all the elements universally and the inherited value have lower Specificity.

For example, 0 Specificity.

Means if we have applied any CSS globally.

And after that Class or ID we apply over any element.

 So, global CSS will not be applied and its Specificity will be lowest. Instead of this Class, ID or elements CSS that will be there, that will be applied with more preference. 

Then comes, the style property has a greater Specificity value compared to the selectors.

 Except the important in the stylesheet selector.

 It means how many properties we have written with style.

 That means Inline CSS. Inline means when we…internal, inline and external, these 3 types CSS we had learned in our 3^rd segment.

Like how we can add the CSS.

So, inside whichever the element like div and p.(4:33)

 In the element, when we add CSS with the style attributes.

That is most preferred. But in any place inside internal CSS, means the CSS that we add in the head tag.

 If there we have added any CSS with importance.

In that case important CSS will be given more preference. 

But if importance is not given then the CSS that we have written with style attribute, will be given more importance.

Means that will be preferred and will be applicable in our output.

Last, the important alter the selector Specificity.

When two selectors have equal Specificity, then the selector has importance.

It means whichever selector is given important Specificity that will be most applicable and will be given high preference.

When we had covered the Important segment, we had seen this also with the practical that if we had given Important twice to the same thing, whichever comes later, later.

That importance is given more preference.

If we have taken any property anywhere and we have given one as important in the two.

Wherever we must have given importance, that property will be preferred and will be more applicable.

So, this was our basic theory of Specificity.

 Specificity has a hierarchy, which means when comparing which Specificity comes on high priority.

So, here it is mentioned, 1^st of all Inline styles.

 It is directly attached to the element which is to be styled.

 For example, p, in that inline style.

It has the highest priority.

Means, wherever inside Inline that means with the tag, with our element property is given with the style attribute.

That will be given more priority.

Next, IDs. It is a unique identifier for the elements of a page that has the second-highest priority. 

For example, after # para.

Means, I have an example, any element and in that ID has been given.

So for example, if we have not applied this Inline CSS, instead of that we have applied ID.

So, our ID will be given more preference if it is not an Inline CSS.

So, the highest priority comes from our Inline CSS. After inline CSS the second priority comes from the IDs.

 Then there are classes, attributes and pseudo-classes.

 It includes classes, attributes and pseudo-classes like :focus, :hover, etc. or if we have any other class like .para or .avc, etc.

So, ID is on the 2^nd position in the hierarchy, after that the CSS that is applied is of classes, attributes or pseudo-classes.

And at the end the CSS that is applied is Elements and pseudo-elements.

For example, if I have directly written div or p, I have added any CSS or with h1 heading, I have added any CSS.

So, that will come at the end.

Which is the highest priority CSS that will be applied to my element? So, the 1^st chance is of the Inline CSS, if Inline CSS is not there, the 2^nd chance comes from the ID.

If ID is not there, then of classes or attributes.

If there is nothing from these then for our elements.

So, this is our hierarchy, in which way our CSS is applied.

Now, we have a few rules available with me, which one is given higher priority.

Based on these 3 rules we will see today’s practical.

 The 1^st one the Specificity of ID selectors is higher than attribute selectors.

 For this what we will do 1^st is open Sublime text, so that you can easily understand the program. HTML, “Example Specificity 1”.

 This is the 1^st example, save.

So, here our program is running.

Now, here what we will do is we will take one division and give it an attribute and ID.

If we go in the slide, what is written there, in our rules.

The Specificity of the ID selector is higher than the attribute selector.

What do we need to perform this? We need an ID and attribute as well.

So, what will we do for it? In the program 1^st of all we will take a division and, in that division, we will take an ID.

And we will give name to the ID, abc, in this division, with abc id.

For example, I write, “This is Learnvern”.

Okay. So. This has come, “This is Learnvern”.

 I will give it some styling and make it colorful.

So, let’s say in the body, I will give something in the body.

For example, like we do every time, we will do text align, center.

We will take the background color as light-green.

We will take the font size as 30px.

Color, we will take yellow or some bright color for example red and we have taken the background color in our body.

We have taken font size and if you want to give color to the font, that also you can give. It’s fine, so now we will keep this much with us.

Okay. So, this is our green color, the font color has become red. So in body, we have given color to our font is red. (11:05)

 Now what will we do? Division is available with us in two ways.

 One is the div, which is our element.

And the ID is available with us, abc.

If I have to do any styling to this division.

 I can do it through elements and through ID.

1^st I will do it through ID i.e., abc.

Now I want that whatever is there with abc should be seen in a yellow background.

 I will take the background color yellow.

Okay, so my yellow color has come.

 But I will temporarily comment on it.

I want that we should perform it as an attribute selector.

Through the attribute selector when I give the background color, it would be blue.

So, how does the attribute selector work, we have to take an element, then square brackets.

Then inside it, id=, whatever is our id, for example it is abc here.

What is this? It means that an element whose attribute has been given.

We identify attributes with a square bracket.

One such attribute whose id is abc. Whichever element’s id is abc, this CSS will be applied to it.

So, I take the background color as blue.

So, here my yellow has been changed to blue.

So, I have written 2 CSS.

One was with the help of id and one was with the help of attributes.

What was mentioned in our slide? The specificity of ID selectors is higher than attribute selectors.

When I will execute them together.

Means I will execute the ID and attribute as well.

Our color should be yellow or blue. I am saving and reloading.

So, the color changed to yellow.

 Means The CSS that I had taken with the help of ID.

The ID, CSS is active with more preference.

And the CSS that I had taken from an attribute that is not getting applicable here.

It means that ID is given more preference.

Its specificity is more. So, this is what we get to know from the example.

When we even use attribute selector and ID selector as well.

Whichever ID selector designing we must have given, that will be active in our program.

Our next rule is that, in equal specificity, the latest rule will count.

So, what happens here, that we will see.

For that also we will make a new program.

 For example, html. “Example…” here we had mentioned specificity 1, “…specificity 2”.

We will save it by specificity rule two.

Because we are going to check the 2^nd rule.

So, here our rule is that, like it is mentioned in the slide.

In equal specificity, the latest rule will be count.

So, what will I do to perform the example? I will take one h2 and one div.

 H2 is normally for our heading, “Example of equal specificity”.

Okay. And whatever CSS we had applied in the last segment, the same we will place here as well. (15:03)

 Okay. So, an example of equal specificity.

What we will do in this is we will take a div and perform this.

 For example, I will write something in the div, “This is Learnvern ''.

 I am not giving any class to the div. Okay. This is Learnvern.

What we are checking here, the latest specificity will be given more priority.

In one division I will write, background color red.

Again I will write inside div, background color, yellow.

So, I have applied 2 background colors to the div.

One is red and one is yellow. If I comment on the yellow one.

So, I am getting a red background here.

 If I uncomment this and comment on the above one.

 So, I am getting it in a yellow color background.

So, here when we work individually, we are getting both the colors.

When I execute them both together, then what is happening? My yellow color is staying active.

Because the 1^st time that I designed was red, the second time what I designed was yellow.

 In the hierarchy, code by code when we come down, the property that is fired latest.

 So, which is that has been fired latest, background color, yellow, which comes later.

Whichever comes latest or later, accordingly the property will be applied.

That is the reason.

In “This is Learnvern” the CSS that is getting active, that is in yellow color.

 The CSS that is getting active is in yellow color.

M will come here.

Okay. Now our 3^rd rule.

The specificity of the class selector is greater than the element selectors.

For this as well we will generate a new program. HTML, “Example specificity 3”.

Save and here whatever we have written in style, we will copy that.

And this div portion I will remove from here because we want a body portion here.

Save. So, what will we do to perform this program? We will take one h1 and one div, same that we had taken ahead.

So, here this portion is the same.

“Example of class…” class selector and the element selector.

Save. So, this is our program.

So, this is the example of class and element selector.

We will add a class in this division, for example I will give this the name abc.

Now, I will apply the CSS to division and I will apply CSS to the class as well.

For that I will take class.

For class we will use .abc. Background color- red. Div is my element.

So, div, background color- yellow.

Okay. So, currently if I comment this. Okay.

 So, I will get the background color as red, with the help of the class selector.

 If I comment on this portion.

When I make this active, I am getting yellow.

 So, after applying individually, class and element, both get fired and are applied.

But when will I apply both of them together? Save and reload.

 In that case, whatever I have defined under class that is getting active with more priority.

So, my class is abc and to the class I have given the background color as red.

Div, means I have given yellow color to the elements.

So, which property is actually getting applicable? That is my class one.

So, here what do we get to know? That the class compared to the element selector.

Class selector’s specificity is more.

So, in total we have performed 3 examples.

 First was the one in which we saw from ID and Attribute, ID is given more preference.

 If we have given it to two same elements, the properties of elements that come later, we give that more preference.

Means to the latest one.

And 3^rd if we have taken class and element then class is given more priority.

So, we have performed all three rules with practical and checked. 

So, guys I will request you that, in today’s segment, to learn specificity.

Which selector, ID, Class, Element, Attribute.

 From these 4, which selector is given more priority, that we have performed with the practical.

So, I request that you, yourself, perform these practicals and check how it works.

If while performing the practical, you are facing any issues or difficulties.

 You can tell us on forums.learnvern.com.

We would try to revert to all your issues there with the answers.

 In the next section we will see the background.

Means, the properties that we have seen regarding the color and attachment.

Apart from that there are many other properties.

We will see about it in the next section.

 Thank You.