| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| * { |
| color: black; |
| } |
| /* Simple Selector. */ |
| .case1:not(.notgreen) { |
| color: green; |
| } |
| /* Compound Selector. */ |
| .case2:not(.foo.bar) { |
| color: green; |
| } |
| /* Element not in a link. */ |
| .case3:not(a *) { |
| color: green; |
| } |
| /* Neither .foo nor .bar. */ |
| .case4:not(.foo, .bar) { |
| color: green; |
| } |
| </style> |
| <script> |
| window.addEventListener("load", function() { |
| document.body.offsetTop; // Force layout. |
| document.getElementById("case1update1").classList.add("notgreen"); |
| document.getElementById("case1update2").classList.add("notgreen"); |
| document.getElementById("case2update1").classList.add("foo"); |
| document.getElementById("case2update1").classList.add("bar"); |
| document.getElementById("case2update2").classList.add("bar"); |
| document.getElementById("case2update2").classList.add("foo"); |
| document.getElementById("case4update1").classList.add("foo"); |
| document.getElementById("case4update2").classList.add("bar"); |
| }); |
| </script> |
| </head> |
| <body> |
| <p>Test various use cases of the :not() pseudo class. If the test succeed, the text "GREEN" should be colored green.</p> |
| <div> |
| <span class="case1 notgreen">WebKit</span> <span class="case1">GREEN</span> <span class="case1 notgreen">WebKit</span> |
| <span id="case1update1" class="case1">WebKit</span> <span class="case1">GREEN</span> <span id="case1update2" class="case1">WebKit</span> |
| |
| <span class="case2 foo bar">WebKit</span> <span class="case2">GREEN</span> <span class="case2 foo bar">WebKit</span> |
| <span id="case2update1" class="case2">WebKit</span> <span class="case2">GREEN</span> <span id="case2update2" class="case2">WebKit</span> |
| |
| <div> |
| <a> |
| <div> |
| <span>WebKit</span> |
| <span class="case3">WebKit</span> |
| <span>WebKit</span> |
| </div> |
| </a> |
| </div> |
| <div> |
| <div> |
| <div> |
| <span>WebKit</span> |
| <span class="case3">GREEN</span> |
| <span>WebKit</span> |
| <div> |
| <span>WebKit</span> |
| <span class="case3">GREEN</span> |
| <span>WebKit</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <span class="case4 foo">WebKit</span> <span class="case4">GREEN</span> <span class="case4 bar">WebKit</span> |
| <span id="case4update1" class="case4">WebKit</span> <span class="case4">GREEN</span> <span id="case4update2" class="case4">WebKit</span> |
| </div> |
| </body> |
| </html> |
