CSS Selector Level 4 » Relational pseudo-class

The relational pseudo-class represents elements whose relative scope selector matches when evaluated absolute. Currently browser vendors are not required to support this selector in order to conform with the level 4 specification.

# Syntax

selector1:has(selector2) {
    /* declarations */

# Example

header:has(h1) {
    background-color: blue;

The mentioned example applies a blue background color to the header element with <h1> sub elements.

Try example in CodePen

# Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (105) Yes (121) Yes (15.4) Yes (105) No Yes (91)
Mobile Yes (105) Yes (121) Yes (15.4) Yes (105) No Yes (72)

# 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