| <!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> |
