Thoughts on upcoming CSS parent selector

28 May 2012

I wrote a while ago about the future CSS4 Selectors, namely about CSS Selectors Level 4 Working Draft release. It was such a good news to see that things are continuously moving on. I’m saying that because it’s a long way until CSS3 will reach final recommendation phase and yet we’re seeing news about the future CSS4. Isn’t that cool?

Meanwhile, I thought a little bit about the upcoming CSS parent selector. At this time, if you ask me, I think it will be the most awesome feature and definitely is at the top of my CSS wishlist.

Syntax

Ever since the CSS parent selector was brought into attention, there has been a lot of discussion regarding its syntax. Mostly disapproving the way the syntax looks in currently Working Draft:

$E>F{background:#fff;}

Select an E element parent of an F element.

However, along with the latest Editor’s Draft, it seems that things improved a bit:

E!>F{background:#fff;}

Again, the newest syntax that helps determining the subject of a selector.

Well, this will probably not be the last edit to the syntax so I bet we’ll witness more changes in the future.

CSS parent selector in practice

This article is not about the syntax itself, it’s more about how would you use the CSS parent selector in your daily work? Also, how much can this help you writing better and smarter lines of CSS?

These are the questions I’m asking myself lately about this matter so I thought about some example scenarios:

Dropdown menu

For CSS dropdown menus, we would be able to style the li accordingly when it contains a sub menu.

In this case, for the Categories section, here’s how we could add an arrow to the right for the parent list element: