Skip to content

Instantly share code, notes, and snippets.

@dperini

dperini/CSS_and_Selector_parsing_differences

Last active October 28, 2017 19:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dperini/55e755c5b518286048afe613e02af082 to your computer and use it in GitHub Desktop.
Save dperini/55e755c5b518286048afe613e02af082 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
CSS_and_Selector_parsing_differences
<!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