38.txt

// selectors and their specificity
As you build a website, the complexity of the code might increase to such a point that more than one CSS rule is applied to the 
same element. Or, you might accidentally add more than one rule over the same element. This results in conflicts as only one rule 
can be applied to a specific property. For example, the color of a certain p tag can either be blue or white, but not both. CSS 
engines use something called specificity to resolve these conflicts. Specificity is the ranking or score that helps CSS determine 
the final rule that will be applied to a given element. 

This reading will help you grasp how the element with the ‘highest’ specificity is selected by CSS. But before you read on, it is
important to note that these rules only apply in cases where conflicts arise for the properties. 

# Specificity hierarchy

CSS has a set of rules that it uses to ‘score’ or assign a certain weight to selectors and this creates a specificity hierarchy. Based on the weights, there are four categories in this hierarchy: 

1. Inline styles 
2. IDs 
3. Classes, attributes, and pseudo-classes 
4. Elements and pseudo-elements 
5. Inline styles

* Inline styles are attached to the elements within your HTML code like with the ‘style’ attribute. inline styles have the highest 
specificity. That means that rules that are defined as inline styles will be applied irrespective of other rules. 

For example, take these two rules that create a conflict in color styling for a p tag:

 <p style=“color: white;”> 
 p{color: blue} 

The p tag will be colored white because it is declared inside the inline tag. 

* IDs

Next in the hierarchy are IDs and by now you know that they are represented by ‘#’.  For example:

#div

* Classes, attributes, and pseudo-classes

Classes, and the attributes inside the selectors, come next with what is called the pseudo-classes that you will soon learn more 
about. 

For example:

.my-class 
p[“attribute”]
div:hover

* Elements and pseudo-elements

Finally, elements and something you call pseudo-elements have the lowest position in the specificity hierarchy. You will learn 
more about pseudo-elements later in this lesson.

Calculating scores

But by now you might wonder how is specificity calculated? 
CSS uses the hierarchical model internally to calculate the specificity of the selectors used on a web page. But often as the 
size of CSS code increases, developers unavoidably face rule conflicts. In these cases, developers use the specificity hierarchy 
to calculate the precedence of CSS rules and to control the outcome of their web pages. 
Let’s explore a practical example of how to determine the score of a few selectors. 

#hello {} will be 0100
div {} will be 0001 and
div p.foo {} will be 0012

In the order stated above, the four categories will be assigned values 1000, 100, 10 and 1 with the element selectors having the 
lowest value of 1. These scores will be calculated respectively for each element present inside the selector. The total score 
for these elements is then calculated and the one with the highest value has the highest specificity.

Let’s explore a couple of examples for clarity. Take note that the properties and values are not included in these examples to 
keep the focus on the selectors only. 

Example 1

p {} div 
p {}
div p.foo {}

p  => 1 element =>  0 0 0 1 => Score: 1
div p => 2 elements => 0 0 0 2 => Score: 2
div p.foo {} => 2 elements and 1 class selector => 0 0 1 2 => Score: 12
The third case has a total of 12 for the p tag and so has the highest specificity. The rules for the other two cases are then 
overridden and the rules inside the third case are applied. 

Example 2

p#bar => 1 element & 1 ID =>  0 1 0 1 => Score: 101
p.foo => 1 element & 1 class => 0 0 1 1 => Score: 11
p.p.foo => 1 element & 2 class =>  0 0 2 1 => Score: 21
By now it should be clear that the case containing ID has a much higher score and the rules inside it will be applied. 

Once you learn about the different pseudo-classes, pseudo-elements, and wide range of selectors later in this section, it will 
be easy to see why understanding specificity is important. 

While the weights assigned from the hierarchical structure help in a systematic approach, there are a few more guidelines and 
rules that become important especially in cases when the score for the different selectors is the same. Some of these are:

1. Every selector will have a score and place in the hierarchy
2. In the case of selectors with equal specificity, the latest or last written rule is the one that will be applied
3. In general, ID selector should be applied in cases where you need to be certain about a rule 
4. Universal selectors have zero specificity value

This reading only gave you an overview of specificity, but you should know that it is a much broader topic and also the 
underlying basis on which CSS engines work. That's what the 'Cascading' in CSS means: the way in which CSS engines evaluate and 
apply the specificity rules is called ‘cascade’. Cascade is a type of small waterfall that falls in stages down the rocks and 
that is exactly how CSS behaves. 

Don’t be too worried about applying what you’ve learned now, there are CSS specificity calculators available that can help you 
with determining the styling outcomes of your pages.