Why is this an issue?

In CSS, when selectors are duplicated, the browser applies them in cascade. This means that if two selectors are identical, the second one takes precedence. However, if the declarations within the selectors are not conflicting, they will be combined.

This behavior can lead to unexpected results and make debugging more difficult, especially in larger stylesheets. Therefore, it’s generally recommended to avoid duplicating selectors.

The rule detects the following kinds of duplications:

• within a list of selectors in a single rule set,
• for duplicated selectors in different rule sets within a single stylesheet.

How to fix it

To fix your code, either remove the duplicated selector or merge all declarations.

Code examples

Noncompliant code example

p {
  color: blue;
  font-size: 16px;
}

p { /* Noncompliant: duplicated selector 'p', overwrites property 'color' */
  color: red;
}

Compliant solution

p {
  color: red;
  font-size: 16px;
}

Resources

Documentation

• MDN - CSS selectors
• MDN - Cascade, specificity, and inheritance