Perusing my favorite web-geek sites this morning, I cam across a very exciting article on Smashing Magazine, Sneak Peek Into The Future: Selectors, Level 4. The article goes into much detail about many of the new selectors that are coming, but there is one that I’m particularly excited about: parent selectors.
I can’t tell you how many times I’ve wanted to style a parent element based on what it contained! With CSS Level 3, this is not possible, you need to fall back on JavaScript to add a class to the parent element. But with CSS Level 4, the syntax would look something like this:
.nav ul li! a.active { color: red; }
Notice the bang after li? That’s telling the selector engine “Style this element rather than the one at the end of the selector chain, if you please – or even if you don’t please.” No longer will we have to rely on looping through a set of DOM elements and adding a class to a particular parent, now we can just style that parent directly!
Talk about a time saver.