CSS Specificity? What is it???

-
I am damn sure most of you might find difficult to pronounce the word specificity, if you don't then congratulation you are some one special. Others don't get disappointed, the concept of specificity is not that hard to understand.

 So what is specificity? In CSS, to style a DOM element we can use different CSS declarations, for example in the below image all four CSS declarations can affect the h1 element.  


OK, now we know that we can style a DOM element with different CSS declarations, and then comes another question, among these declaration which declaration styles will be applied to the element (this matters when we try to change the same style property value, in this case we have color property in all the CSS declarations)? 

 To answer this question, I would say the declaration with highest specificity will get the priority and its styles will be applied to the DOM element. Now let's comeback to the first question, what is specificity? We can say specificity is the weight of a CSS declaration.

Then some of you might ask can we calculate the specificity for a CSS declaration? Yes, we can, but it's not a real calculation, still it's enough to find which declaration have more priority (specificity) over other declaration.

 Let's go through the specificity calculation technique, When it comes to calculating the specificity of a CSS declaration, we have to consider the four levels of priority.

 level 1 (lowest priority) - Element styles (ex - h1, p, etc)
level 2 - Class styles
level 3 - Id styles
level 4 (highest priority) - Inline styles

Let's understand this with another example.

As you can see in the above image, we have three CSS declarations, first one is an id style declaration, second one is a class style declaration and the final one is an element style declaration. If you take the first example (Hello World), it is a h1 element and it belongs to the spec class, but you could see the styles that got applied are class styles.

 In the next example (Hello Home) Id styles got more priority over class and element styles.

 OK, this is fine, then the next question comes, is specificity only depend on these levels or is there anything else that can change the specificity of a declaration? For example what if we have two element type CSS declarations? 

 In such scenario's it will count the number of elements in the declaration and give priority to the declaration with most number of elements, to understand this concept let's take this example below.  

Here we only have element type CSS declarations, and the first declaration have two elements, therefore it has applied the styles in the first declaration.

OK, that's all for the concept, Let's take one final example to understand the calculation, 

If you run the above code, you could see the color of the text is blue, but how??? Let's go to the technique.

 1. Take these values for different priority levels( Element - 1, Class - 10, Id - 100, Inline - 1000 )

 2. Multiply the elements with corresponding value, and sum those, highest sum will have more specificity and get the highest priority.

 Take the above example and understand.

 1. body h1.x.y = 1 + 1 + 10 + 10 = 22

 2. .x.y.z = 10 + 10 + 10 = 30

 3. h1 = 1

 I hope now it makes sense why it showed blue color. That's it. I hope you understand what specificity is. 

 !important rule
Before finishing this article I like to point out another important concept on !important rule. If we use the !important phrase in our CSS style property, then the specificity concept will be invalid and the priority will be given to the declaration which has the !important phrase.


That's it. So from now on, if you want to override a specific style in a existing CSS file, you can use this knowledge and write a CSS declaration with more specificity and get your job done.

 Right 😉.

Comments

Post a Comment

Popular posts from this blog

Classification using K-Nearest Neighbor Classifier with Scikit Learn

-
Image
K-NN is a very simple machine learning algorithm which can classify a point based on other nearest points. Let's take an example, if you see the below image. We have set k = 3, this means that we will classify a point based on the nearest three points, in this case two of the three points are orange points therefore the unknown point (blue point) will be classified as an orange point. OK, let's do a real classification task, in this example I am going to classify the most popular iris flower data set. In this data set there are samples of three different types of Iris flower. Those are Versicolor, Verginica, Setosa and I am going to build a model that is capable of classifying a new flower into one of these categories.  Let's code, Step 1 - Import the necessary libraries and load the data (I am going to make use of Scikit Learn's Iris Data set) Let's understand the data set, this data set consist of 150 records (Every Iris type has 50 r...
Read more

Web Scraping with Python and Beautiful Soup

-
Image
For any machine learning task the first thing we need to do is data collection. There are number of different ways to collect data. Let's see some of those. 1. API's: The preferred way of data collection is consuming API's, the reason is, API's are well structured, also consuming an API is very simple. 2. Public Data sets: This is the second best option, there are people who have collected data and made it available to the public. Sites like  Kaggle , University of California's Machine Learning Repository  are some place where you can find public data sets. If you could not find data from the above two methods then the last option is to go for the web scraping. Choose the website which provides data for you, scrape the content, prepare your own data set.  In this post I'm going to show you an example of scraping the cricbuzz website blog posts.  Let's understand the scraping procedure. It's very simple, we have python libraries that wil...
Read more

Getting Started With Association Rule Algorithms in Machine Learning (Apriori) - with only 8 lines of code

-
Image
Machine Learning is all about finding patterns in the past data and using it to take future decisions. There are many types of algorithms available in machine learning like classification, regression, clustering and etc. Based on our requirement and resources we will choose one.  Association rules are another type of machine learning algorithms which will allow us to find the relationships between two or more elements. In association rules we will try to find data item that have association with another data item, to explain this let's take the super market for example, In super market arranging the products take lots of decision making, because they need to decide how to make the customer buy more products. Let's say if you keep a complementing product close to another product such as tea and sugar then there is a high possibility where customer will buy both. Finding association between tea and sugar is quite obvious, but do you know baby pampers and the beer have ...
Read more