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