CSS selectors: Is there a way to select surrounding elements?

Question

I have a feeling this might involve some sort of advanced selectors, but I could be wrong. I have this HTML to work with:

<dt></dt>
<dd><input type="hidden" class="hidden"></dd>

...and I need to make the DT and DD tags to be hidden from view. I am able to apply a class on the input tag but not on the others. So how can I apply the "hidden" class style on the DT/DD tags?

Answer 1

You can't do that in any sort of cross-browser specific way. jQuery (or similar Javascript library) will allow you to do it with something like:

$("dd:has(input.classname)").each(function() {
  $(this).hide().prev().hide();
});

or

$("input.classname").each(function() {
  $(this).parent().hide().prev().hide();
});

Note: a lot of jQuery's functionality revolves around using advanced selectors many of which are part of the CSS3 standard but that standard is only partially implemented in the most modern of browsers. Javascript is the way to go for any kind of broad browser compatibility.

Answer 2

There is no cross-browser practical way of targeting a parent element in a selector from its child, your best bet is probably using JS if you absolutely have no control over the markup.