CSS Selectors & Specificity

August 11, 2019

CSS Selector Overview

There are multiple ways to select the elements you’re trying to style in CSS. Let’s start by reviewing all the options.

Type Selectors: Select your intended element by using its element type. For example, to select all your <p>tags, use p in your CSS style sheet.

Pseudo-Elements:

As the name suggests, pseudo-elements are not elements themselves but allow you to select part of your HTML relative to another selector. For example, select the first letter of each paragraph with p::first-letter.

Class Selectors:

Elements can have multiple classes set on them to be selected in your CSS style sheet. For example,<h1 class='header'>can be selected with .header. Multiple elements can have the same class applied to them.

Attribute Selectors:

Select elements that have a specific type of attribute applied to them. For example, select inputs that accept numbers only with input[type='number'].

Pseudo-Classes:

Select elements based on the CSS state they’re in. For example, style the hovered state of a button with button:hover. Check out these previous tutorials on the :target, :hover and :active pseudo-classes to learn more.

ID Selectors:

Select a specific element with its unique ID. There can only be one element with each ID, whereas classes can be applied to multiple elements. For example, select <h1 id='mainHeader'> with #mainHeader.

Inline Styles:

Inline styles are applied to elements directly with the style attribute so you don’t actually use any CSS selectors. For example, you can make your header font color blue directly with <h1 style='color: blue;'>

👉 CSS Selectors and Their “Weights”

Each type of selector listed above has a weight. All of these can be divided into four main groups:

<style="color:red">lowest weight: type and pseudo-element selectors

low weight: class, attribute, and pseudo-class selectors

medium weight: ID selectors

high weight: inline styling

If styles of differing weights are applied to the same element, the styling with the higher weight will be applied. If styles of even weights are applied, the styles that come last (nearest to the end of your style sheet) will be applied. This is due to the “cascading” effect of CSS (Cascading Style Sheets).

When two selectors of the same weight are applied to an element, it counts as 2x the weight. So, for example, an element selected with two classes will have a higher weight than just one in your CSS.

.gator.cayman {
  // two classes
  color: purple;
}

.gator {
  // one class
  color: purple;
}

The 🛑 Problem with Competing Selectors

👉 Understanding that different selectors have different weights is crucial for getting your CSS organized. But what if it’s not clear what has a higher weight?

Let’s say we have a paragraph that has two completing blocks of CSS: one with three matching classes and another block with a type attribute and two matching classes.

For example, let’s take this input with three classes and a number type attribute applied to it.

<input type="number" class="gator cayman reptile" />

If we apply these competing selectors (three matching classes vs. two matching classes and an attribute), which one will get applied?

.gator.cayman.reptile {
  color: purple;
}

[type='number'].gator.cayman {
  color: green;
}

👉 In this case, the “weight” of both blocks is completely even. Attribute selectors and class selectors have the same weight and each block has three of them in total. Since they’re even, we rely on the cascading effect of CSS. The last one gets applied and the input font color will be green.

This gets a little more complicated when you have selectors of different weights getting mixed, though.

Let’s update our input to have an ID, which has a higher weight than classes and attributes.

<input type="number" id="gatorInput" class="gator cayman reptile" />

Article is under construction .... To be continued...

Up next