<!doctype html>
<html>
<head>
<style>
    * {
        background-color: blue;
        color: blue;
        border: 5px solid black;
    }

    /* The following :is() gets a different class of specificity. Depending on what
       matches, the later rules may override this or not. */
    :is(.classB, target, #classA, *) {
        background-color: red;
        color: purple;
        border: none;
    }

    target {
        background-color: green;
        color: white;
    }
    .classB {
        background-color: blue;
    }
    body > * {
        display: block;
    }
    html, body, p {
        background-color: white;
        color: black;
    }
</style>
</head>
<body>
    <p>This test checks the dynamic specificity of :is() changing the order in which rules are applied depending on the element. Each element should have the colors described in the text and no border.</p>
    <nottarget>Purple text on red background.</nottarget>
    <target>White text on green background.</target>
    <nottarget id="classA">Purple text on red background.</nottarget>
    <target id="classA">Purple text on red background.</target>
    <nottarget class="classB">Purple text on blue background.</nottarget>
    <target class="classB">Purple text on blue background.</target>
    <nottarget id="classA" class="classB">Purple text on red background.</nottarget>
    <target id="classA" class="classB">Purple text on red background.</target>
</body>
</html>