<!doctype html>
<html>
<head>
    <style>
        /* Specificity: (1, 1, 1). */
        testcase.case#case1, testcase.case#case2 {
            background-color: red;
            color: white;
            border: 10px solid black;
        }

        /* The maximum here is (1, 0, 1), the total is (1, 0, 2) which does not override the baseline. */
        testcase:not(testcase1, testcase2, testcase1.foo, testcase1.foo.bar, testcase1.foo.bar.baz, #case2, testcase#case2, testcase1#case2) {
            background-color: blue;
        }

        /* Adding #case2.case to push to (1, 1, 1). */
        testcase:not(testcase1, testcase2, testcase1.foo, testcase1.foo.bar, testcase1.foo.bar.baz, #case2, testcase#case2, testcase1#case2, #case2.case) {
            background-color: pink;
        }

        /* #case2.case.case2 to push to (1, 2, 1). */
        testcase:not(testcase1, testcase2, testcase1.foo, testcase1.foo.bar, testcase1.foo.bar.baz, #case2, testcase#case2, testcase1#case2, #case2.case.case2) {
            color: green;
        }

        /* #case2.case#case1 to push to (2, 0, 1). */
        testcase:not(testcase1, testcase2, testcase1.foo, testcase1.foo.bar, testcase1.foo.bar.baz, #case2, testcase#case2, testcase1#case2, #case2#case1) {
            border: none;
        }

        /* The maximum here is (1, 0, 1), the total is (1, 0, 2) which does not override the baseline. */
        testcase:not(testcase1#case2) {
            background-color: blue;
        }

        /* Adding testcase#case2.case to push to (1, 1, 1). */
        testcase:not(#case1.case) {
            background-color: green;
        }

        /* #case2.case.case2 to push to (1, 2, 1). */
        testcase:not(#case1.case.case) {
            color: pink;
        }

        /* #case3#case1 to push to (2, 0, 1). */
        testcase:not(#case3#case1) {
            border: none;
        }
    </style>
</head>
<body>
    <p>Test the specificity of :not() with compound selectors.</p>
    <testcase class="case" id="case1">This sentence should be green on a pink background, without border.</testcase>
    <testcase class="case" id="case2">This sentence should be pink on a green background, without border.</testcase>
</body>
</html>