Understanding CSS Specificity Rules

In Cascading Style Sheet, CSS, there is a property called specificity. CSS Specificity is the process of determining the most relevant set of CSS property values or styles browsers will apply to an element especially when there is a conflicting set of rules.

As you get deeper into developing a website, there is a tendency that your CSS files will become large, sometimes very large when you’re coding a big website. There is a good chance that you will run into a problem determining the right CSS selector to apply to an element.

For you to understand CSS Specificity, you must understand CSS selectors. CSS Selectors-are that part of CSS rule that finds or selects the HTML elements you want to style.

The most common CSS selectors are summarized below,

Universal Selectors: It is denoted by (*) and selects all HTML elements on the page.

Example: Here, all elements on the page will have a font-size of

4px

* {  font-size: 4px;}

Element Selector: This selects HTML elements based on the name of the element

Example: Here all <h1> elements on the page will be center-aligned.

h1 {  text-align: center;}

CSS id Selector: This uses the id attribute of an HTML element to select a specific element.

Example: Here, the element with id my-text will have a font-color of red;

#my-text {  color: red;}

CSS Class Selector: This selects all HTML elements with a specific class attribute.

Example: Here all the elements with the class my-name will have a text color of green.

.my-name {  color: green;}

Grouping Selector: This selects two or more elements, classes, id, or a combination of it and gives them the same style.

Example: Here all h1, h2, p elements will have a color of yellow;

h1,h2,p {  color: yellow;}

Understand the Hierarchy of CSS Specificity 

Before I list the hierarchy of CSS specificity, I want you to have this concept in your memory;

More Specific = Higher Priority

When a selector is more specific to an element, it has a higher priority.

Inline Styles

Inline-styles are the styles defined directly within an HTML element’s tag. Example;

<p style="color: blue;">Hello Selector</p>

The "Hello Selector" will have a font-color of blue. This style is more specific to the p element than any other style that may be applied to it in the same document. Thus it has the highest priority in the CSS hierarchy of Specificity.

ID Selectors

ID selectors are the next in the hierarchy. They can only be overridden by inline styles. ID selectors are unique to one element.

Class Selectors, Attributes, and Pseudo Classes

Class selectors, attributes, and pseudo-class selectors are the next in the hierarchy. These three are at the same level. They can be overridden by Inline styles and ID selectors. In case you don’t know, attribute selectors and values are used to select elements with the specified attribute value.

Example: Here all input elements with type text will have a block display.

input [type="text"] {  display: block;}

Also, Pseudo-classes are used to define a special state of an element. It can be used to style an element when a user mouses over it when the elements get focus.

Example: The color of the <a> element will change to red when a user hovers over it.

a:hover {  color: red;}

Elements and Pseudo Elements

Elements and Pseudo elements are the last in the hierarchy. They can be overridden by all the sets explained above. In other words, they rank the lowest in the hierarchy of CSS specificity.

Remember that pseudo-elements are used to select and style specified parts of an element.

Example: Here, the first line of the selected <p> element will have a font-color of white.

a:hover {  color: red;}

An important thing to note

CSS means, Cascading Style Sheets, this means that the CSS styles applied to an element "cascade" or flows from top to bottom.

 Example:

h2 {color: red;}
h2 {color: blue;}

If the elements have the same specificity, the later style is applied. Here, the later style is applied to the h2 element. Therefore, the h2 element will have a font-color of blue instead of red because of the flow.

Specificity in Action

As I said earlier, as the CSS file becomes larger in a big project, the more complicated your CSS selectors will be and the chance of conflicting CSS rule will be higher. Look at this,

Example 1

p em {  font-weight: bold;}
em {  font-weight: normal;}

Even though the single em style came later in the document, it’s font-weight will be bold, simply because the p em selector is more specific than only em.

Example 2

h2#text-header {  color: yellow;}
h2[id=text-header] {  color: green}

Here, the first style will be applied to the element making the font-color to be yellow. This is because id selector will override attribute selector.

Specificity Calculation

There is a way of calculating the CSS specificity of a selector to see whether it will take precedence over another. The highest calculated sum takes precedence and thus will be applied to the element.

Study the diagram below:

As a rule, points are given to the different levels of CSS specificity hierarchy. When the points are added, depending on the combination of CSS selectors used for an element, the selector group with the highest points will be applied to the element.

Example 1

#cat h2.text-box em

ID + HTML Element + class + HTML Element

100 1 10 1

Example 2

#cat h2.text-box {  background: red;  }
#cat .text-box {  background: green;  }

The first style has a specificity of (100 + 1 +10 ) = Specificity of 111points 

The second style has a specificity of (100+10 ) = Specificity of 110points 

The first selector would win, and the background of .text-box would be red because it has more points than the second selector even though the second selector comes later in the style sheet.

However, there is an online resources that will help you to study more and calculate CSS specificity of selectors. Visit http://specificity.keegan.st/

Summary

As you continue in your journey as a web developer, always remember that there is a property called CSS specificity. The selector group with the highest specificity point value will be applied in case of conflicting rules. If the selectors have the same specificity value, the later style will be applied to the element.

When you have issues with conflicting styles, calm your nerves, remember the hierarchy of specificity. With this, you will be able to detect the error and make the necessary correction. Always be as specific as you need to be when writing CSS.