Last active
October 28, 2017 19:13
-
-
Save dperini/55e755c5b518286048afe613e02af082 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head><title>CSS and Selectors-API parsing differences</title> | |
| <style> | |
| /* these rules have a correct "selectorText" so their style declaration are applied */ | |
| a[href="#"] { background-color: red; } /* style some elements */ | |
| a:not([href="#"]) { background-color: lime; } /* style some elements */ | |
| /* these rules have a incorrect "selectorText" so their style declaration are not applied */ | |
| a:not([href="#"] { background-color: #f00; } /* doesn't style any element */ | |
| a:not([href="#" { background-color: #f80; } /* doesn't style any element */ | |
| a:not([href="# { background-color: ff0; } /* doesn't style any element */ | |
| </style> | |
| </head> | |
| <body> | |
| <h3>Fruits 1</h3> | |
| <ul> | |
| <li><a href="#">Pear</a></li> | |
| </ul> | |
| <h3>Fruits 2</h3> | |
| <ul> | |
| <li><a href="#">Pear</a></li> | |
| <li><a href="#">Apple</a></li> | |
| </ul> | |
| <h3>Fruits 3</h3> | |
| <ul> | |
| <li><a href="pear.html">Pear</a></li> | |
| <li><a href="apple.html">Apple</a></li> | |
| <li><a href="banana.html">Banana</a></li> | |
| </ul> | |
| <script> | |
| var c; | |
| // missing closed double-quote for value, closed bracket for attribute and closed parens in :not() pseudo-class | |
| c = document.querySelectorAll('a:not([href="#'); | |
| console.log('Should throw, instead it matches ', c.length, ' elements.'); | |
| // missing closed bracket for attribute and closed parens in :not() pseudo-class | |
| c = document.querySelectorAll('a:not([href="#"'); | |
| console.log('Should throw, instead it matches ', c.length, ' elements.'); | |
| // missing closed parens in :not() pseudo-class | |
| c = document.querySelectorAll('a:not([href="#"]'); | |
| console.log('Should throw, instead it matches ', c.length, ' elements.'); | |
| // correct syntax all closed parts in place | |
| c = document.querySelectorAll('a:not([href="#"])'); | |
| console.log('Should throw, instead it matches ', c.length, ' elements.'); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment