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 based on:

• 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) {
  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 specifically targets h1, h2, or h3 elements that are direct children of the section, meaning they are only one level down from the section element.