CSS Specificity Algorithm: How Styles Are Applied in the Browser

Abhinav SinghAbhinav Singh
3 min read

Table of contents

Specificity Algorithm

When we start learning CSS, we often get confused about how browsers decide which styles to apply. We use different selectors — like tag names, class names, and IDs — and sometimes we apply styles using inline, internal, or external CSS. But how does the browser decide what gets applied?

Let’s get everyone on the same page by revisiting some basics of CSS.

What is CSS?

CSS stands for Cascading Style Sheets, and there are three ways to apply CSS:

  1. Inline CSS
    As the name suggests, inline CSS is written directly inside an HTML element using the style attribute. It has the highest priority among all three types.

  2. Internal CSS
    In this method, CSS is written inside a <style> tag in the <head> section of the same HTML file.

  3. External CSS
    Here, all CSS is written in a separate file (usually .css) and linked to the HTML file using a <link> tag. This is the most common and maintainable way to style web pages.

CSS Selectors (Basic Ones)

A selector is used to select a particular HTML element or group of elements for styling.

Here are some basic selectors:

1. Universal Selector (*)

This selector targets all elements on the page.

Use case: When you want to apply default styling across the entire page.

Example:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

2. Element Selector

This selector uses the HTML tag name to apply styles.

Example:

p {
  font-size: 15px;
  padding: 10px;
}

3. Class Selector (.)

Target elements with a specific class attribute.

Example:

<div class="header">
  <h1>Hello World</h1>
</div>

<style>
.header {
  padding: 20px;
  font-size: larger;
}
</style>

4. ID Selector (#)

Target elements with a specific id attribute. IDs should be unique on the page.

Example:

<p id="hello">Hello World!</p>

<style>
#hello {
  font-size: 60px;
  color: white;
}
</style>

The Specificity Algorithm

Now that we understand the types of CSS and selectors, let’s talk about which styles get applied when there are conflicts.

Order of Priority (from highest to lowest):

  1. Inline CSS

    • Inline styles override everything else, including ID and class selectors.

    • Example:

        <p style="font-size: 24px; color: #414141; background-color: #ffffff;">
    Hello World!
  </p>

  2. ID Selector

    • Overrides class, element, and universal selectors.

  3. Class Selector

    • Overrides element and universal selectors.

  4. Element Selector

    • Overrides only the universal selector and has the lowest priority.

What if the same selector is used multiple times?

When the same type of selector is used more than once (e.g., two class selectors targeting the same element), the one that comes later in the stylesheet takes priority.

This is because when the browser reads the file, it goes top to bottom, so the last one overrides the earlier one, but only if they are the same type of selector.

For example, if an ID selector is written first and a class selector is written later, the ID selector will still win because it has a higher specificity.

0
Subscribe to my newsletter

Read articles from Abhinav Singh directly inside your inbox. Subscribe to the newsletter, and don't miss out.

ChaiCode

Written by

Abhinav Singh
Abhinav Singh