where

Description
Syntax
Examples
Links

Description

The where pseudo-class for CSS same syntax and functionality as :is(), but its specificity is always zero.

Syntax

selector:where()
{
    property: value;
}

<!doctype html>
<html>
<head>
    <style>
        p:where(:first-child,:last-child)
        {
            background-color: var(--myvar1);
        }
        p
        {
            background-color: var(--myvar2);
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button value="yellow red">value</button><br>
    <div>
        <p>where</p>
        <p>where</p>
        <p>where</p>
    </div>
    <div>
        <p>where</p>
        <p>where</p>
        <p>where</p>
    </div>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            let myvalue1 = myvalue2 = myproperty;
            if(myproperty.indexOf(" "))
            {
                const myvalue = myproperty.split(" ");
                myvalue1 = myvalue[0];
                myvalue2 = myvalue[1];
            }
            const mystyle = document.querySelector(":root").style;
            mystyle.setProperty("--myvar1", myvalue1);
            mystyle.setProperty("--myvar2", myvalue2);
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>

4 · JS · is

<!doctype html>
<html>
<head>
    <style>
        p:is(:first-child,:last-child)
        {
            background-color: var(--myvar1);
        }
        p
        {
            background-color: var(--myvar2);
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button value="yellow red">value</button><br>
    <div>
        <p>is</p>
        <p>is</p>
        <p>is</p>
    </div>
    <div>
        <p>is</p>
        <p>is</p>
        <p>is</p>
    </div>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            let myvalue1 = myvalue2 = myproperty;
            if(myproperty.indexOf(" "))
            {
                const myvalue = myproperty.split(" ");
                myvalue1 = myvalue[0];
                myvalue2 = myvalue[1];
            }
            const mystyle = document.querySelector(":root").style;
            mystyle.setProperty("--myvar1", myvalue1);
            mystyle.setProperty("--myvar2", myvalue2);
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>