<!doctype html>
<html>
<head>
    <title>Test the specificity of the :not() pseudo class itself.</title>
    <style>
        /* -- 1. Set up the base color for everything with a very low specificity -- */

        /* Each mathing of the type "notthereX should have a specificity of (0, 0, 1), the maxium of this selector should be (0, 0, 1). */
        :not(:not(*), notthere1, notthere2, notthere3, notthere4, notthere5) {
            background-color: white;
            color: black;
        }

        /* The pseudo class :not() itself should have no specificity. The following rule should not have precedence over "*". */
        :not(:not(*)) { /* Specificity: (0, 0, 0). */
            background-color: red;
            color: white;
        }

        /* -- 2. Test class specificity. -- */
        .case {
            background-color: red;
            color: white;
        }

        body > testcase.case { /* Specificity (0, 1, 2). */
            border: none;
        }

        testcase:not(.not-there) { /* Specificity (0, 1, 1). */
            color: lime;
            border: 10px solid black;
        }

        /* Specificity (0, 1, 1) since .not-there has the highest specificity inside :not(). */
        testcase:not(:not(*), foo, .not-there, bar) {
            background-color: pink;
            border: 50px solid black;
        }

        /* -- 3. Test #id specificty, all those rules should override the class rules above. -- */
        #case2 {
            background-color: red;
            color: white;
        }

        body > testcase#case2 { /* Specificity (1, 0, 2). */
            border: none;
        }

        testcase:not(#case1) {
            color: pink;
            border: 10px solid black;
        }

        testcase:not(:not(*), foo, bar, foo.class1.class2, bar.class1.class2.class3.class4, #case1) {
            background-color: lime;
            border: 50px solid black;
        }
    </style>
</head>
<body>
    <p>Test the specificity of the :not() pseudo class. The pseudo class :not() itself does not add anything to the specificity of a its selector, only the selectors inside :not() matter for specificity.</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>