CSS Selector Level 4 » Specificity-adjustment pseudo-class

Similar to matches-any this specificity-adjustment pseudo-class represents an element that is represented by its arguments (as selector list) just with a specificity of zero. This is helpful whenever a general matching is used but simple overwrites should still be possible.

# Syntax

Copy
:where(selector1[, selector2,]) {
    /* declarations */
}

# Example

Copy
input:where(:not(:focus)) {
    background-color: #000000;
}

form input {
    background-color: #bbbbbb;
}

All inputs in this example should have a black background (except on focus) with a specificity of zero which means form input would already overwrite the selector due to a higher specificity.

Try example in CodePen

# Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (88) Yes (78) Yes (14) Yes (88) No Yes (74)
Mobile Yes (88) Yes (79) Yes (14) No No Yes (64)

# Usage statistics (Alexa Top 1,250,000 sites)

Due to an extreme price increase of our statistics provider the data collection was stopped in September 2018.


Please wait a moment, the comments start loading now...
explorermozillachromesafariopera info external