Skip to content

24 ways to impress your friends

Vote down?

Rudolph Gottesheim

Most of the time people request a parent selector, it turns out they could have easily solved their problem in a different (CSS) way. Maybe that’s why nobody seems to listen to them.

Just yesterday I stumbled upon a great use case for the parent selector. Suppose you’ve got the following markup. (Which, in my opinion, is the only right way to mark up forms while being able to style them in every way you like. Tables? Definition lists? Ha!)

<div class=“form-row”>
<label>Name:</label><input type=“text” name=“name” />
</div>

Now, if you want to highlight the label along with the input itself when the input has the :focus, you can only rely on JavaScript.

In this case, it would be great to have something like input:focus < .form-row { … }

Maybe the problem is that selectors generally don’t allow parent elements to sit on the right of a child (Some CSS1 grammar stuff you can’t take back or something..?). That’s not an excuse; in this case, you could do the same thing with a pseudo class: .form-row:contains(input:focus) { … }

Is there anything on the W3C mailing list about this topic?

(BTW I haven’t read the other comments.)