Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
communitycreator

What is a CSS selector specificity?

NDUKWE CHIDERA K.

As the name implies, Cascading Style Sheet is a styling system used to style HTML elements. These styles cascade from top to bottom, where the style above another on the same element will be overwritten by the one below it.

Styles that are applied to HTML are done using a selector. A CSS selector will let you choose the specific HTML element you wish to style. There are three basic ways of achieving this:

Types of CSS selectors

1. Type selector

A CSS type selector will enable you to select an HTML element base on it, <tagname>. With this kind of selector, every element in the HTML code with the specified <tagname> will be styled. For example:

<html>
<head> 
<style> 
p{
color: Red;
background-color:yellow;
}
</style> 
</head> 
<body>
 <p>This is an example para</p>
<body> 
</html>

2. Class selector

A class selector is used to select elements that have the same class name in order to style them in the stylesheet.

<html>
<head> 
<style> 
.pTry{
color: Red;
background-color:yellow;
}
</style> 
</head> 
<body>
<p class="pTry">This is an example para class</p>
<body> 
</html>

In the styles, you start the class name with a period (.)

3. ID selector

ID selectors are used to target a specific element using the id attribute value given to that element.

<html>
<head> 
<style> 
#pTry{
color: Red;
background-color:yellow;
}
</style> 
</head> 
<body>
 <p id="pTry">This is an example para ID</p>
<body> 
</html>

In the styles, you start the ID name with a pound sign (#)

We also have pseudo selectors.

CSS selector specificity

As mentioned earlier, the styles applied on elements on top of the cascade will be overwritten by the ones applied under them on the same element.

But with specificity weight in mind, this can be altered and an element with the same style from different selector types will have the style on top with the two selectors applied to it. We will see how as we move on.

Specificity can also allow you to pick out an element in a very direct manner. It entails how specific you want to be in applying the said style.

The specificity of the selectors

The different selector types have the following specificity:

  • The type selector has the lowest specificity weight and holds a point value of 0-0-1.

  • The class selector has a medium specificity weight and holds a point value of 0-1-0.

  • The ID selector has the highest specificity weight of 1-0-0.

What does this imply?

These weight values are not base 10 values, and that is why they are hyphenated.

With these weights, if an element is given different styles with the three selector types targeting it, no matter where it is placed in the cascade, the style from the ID selector will take precedence over the others, followed by the class selector, and lastly by the type selector.

Let’s examine this concept with the code below.

Code

Explanation

From the code snippet above, the id selector on top in the cascade has its style applied to the <p> element over the style from the class and type selector. It was for the class selector over the type selector as well, all due to the specificity weight of these selectors.

Meanwhile, the styles on the <span> tag will follow the normal cascade rule where the style which is below has precedence over the one above it.

Calculating specificity

If you want to increase the specificity weight of an element, you can do that by adding different weights from the different selector types you use to target the element.

For example, let’s compare the two weights of the selector combination:

  • First combination [type type id class] the individual weights [0-0-1 0-0-1 1-0-0 0-1-0].

Total weight =

0-0-1 +

0-0-1 +

1-0-0 +

0-1-0

= 1-1-2

  • Second combination [id``id type] the individual weight [1-0-0 1-0-0 0-0-1]

Total weight =

1-0-0 +

1-0-0 +

0-0-1

= 2-0-1


Among the two combinations, the second with a total weight of 2-0-1 will surely take precedence over the first, with a total weight 1-1-2, if targeted on the same element. Let’s see this example below, using the combination made in this example.

The code above is just a simple implementation of our example for calculating specificity weights of combined selectors. As indicated in the calculation, it has also been confirmed by our code, as we saw above.

RELATED TAGS

css
communitycreator
RELATED COURSES

View all Courses

Keep Exploring