A Glimpse into the Future of CSS

<!DOCTYPE html>
<html>

  <head>
    <style data-hitch-interpret>
      li:has(em) {
        background: yellow;
      }
    </style>
    
    <script src="http://www.hitchjs.com/dist/hitch-0.6.3.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <ul>
      <li>Sheldon J. Plankton</li>
      <li>Squidward Q. Tentacles</li>
      <li>Garold Wilson <em>"Gary"</em> Snail Jr.</li>
      <li>Eugene Harold Krabs</li>
      <li>Sandra <em>"Sandy"</em> Cheeks</li>
    </ul>
  </body>

</html>

Hitch.add([{
  name: 'has',
	base: '',
	filter: function(match, argsString) {
		var first = argsString.charAt(0);

		if (first === '>' || first === '~') {
			if (!match.getAttribute('x-hitch-id')) {  
        match.setAttribute('x-hitch-id', hid++);
			}
			argsString = '#' + match.getAttribute('x-hitch-id') + ' ' + argsString;
		}
    
		return match.querySelector(argsString) !== null;
	}
}]);