CSS Specificity

Introduction

CSS specificity is a set of rules that determines which styles are applied when there's a conflict between multiple CSS declarations for the same element. Specificity is calculated across four columns:¹

• Inline styles (1,0,0,0)
• IDs (0,1,0,0)
• Classes, attributes, and pseudo-classes (0,0,1,0)
• Elements and pseudo-elements (0,0,0,1)

Each of these contributes to a selector's specificity score, which is used to decide which rule applies when there's a conflict. The higher the score, the more specific the selector.

CSS pseudo-classes

Here are some other commonly used CSS pseudo-classes:

• :hover - Applies styles when the user hovers over an element.
• :active - Applies styles when an element is being activated (e.g., while a button is being clicked).

• :focus - Applies styles when an element has focus, typically for form elements like inputs or buttons.
• :visited - Applies styles to links that the user has visited.
• :nth-child(n) - Selects elements based on their position among a group of siblings.
• :first-child - Selects the first child of its parent.
• :last-child - Selects the last child of its parent.
• :not(selector) - Selects elements that do not match the selector within parentheses.

Using :is()

Now, here's an example of using the :is() pseudo-class:

/* Example usage of :is() to apply styles to multiple selectors */
:is(h1, h2, h3) { // [!code highlight]
  color: blue;
  text-transform: uppercase;
}

/* Example with classes */
:is(.button, .link) {
  padding: 10px;
  border: 1px solid black;
}

/* Combining with other pseudo-classes */
:is(input[type="text"], input[type="password"]):focus {
  border-color: green;
}

In this example:

• The first rule applies blue color and uppercase text transformation to h1, h2, and h3 elements.
  • The second rule adds padding and a border to elements with classes button or link.
  • The third rule changes the border color to green when text or password inputs receive focus.

The :is() pseudo-class simplifies writing CSS by allowing you to group selectors that share common styles, reducing repetition and potentially improving readability and performance. However, keep in mind that while :is() can accept complex selectors, the specificity of the rule will be that of the most specific selector inside :is().

Further exploring with targeting
I just want to follow up some more examples to play with.

/* Example one */
:is(h1, h2, h3) {
  color: blue;
}

/* Example two */
section :is(h1, h2, h3) {
  color: blue;
}

/* Example three */
section > :is(h1, h2, h3) {
  color: blue;
}

In this example:

• Example one targets all h1, h2, h3.
• Example two section :is(h1, h2, h3) targets any h1, h2, or h3 elements that are descendants of a section, regardless of how deeply nested they are within that section.
• Example three section > :is(h1, h2, h3) targets h1, h2, or h3 elements that are direct children of the section, meaning they are only one level down from the section element.

1. The columns are compared left to right, and a higher column always wins regardless of what follows it — a single ID (0,1,0,0) beats any number of classes (0,0,10,0). They don't "carry" like decimal digits, which is why specificity is written as comma-separated groups rather than one number. ↩