CSS Selector - Target DT only when followed by DD

I am attempting to target a &l开发者_运维问答t;dt> only when followed by <dd>. I know there is a preceding selector, however I can not find a CSS method of targeting the <dt>. I know this is possible with JavaScript, but would rather keep it to CSS Selectors if at all possible.

This does not have to function in IE6 or below.

I thought maybe dt ~ dd would work, but it actually functions similar to +, only not quite as specific.

After looking at the W3C css selector document http://www.w3.org/TR/CSS2/selector.html, I can say with a great degree of confidence that what you are wanting to do is not possible with just CSS. It is also missing a way to get the parent selector. Maybe in CSS4...

I'm looking for a similar solution for a similar problem. In my case I want to select the last dd in a dd group, so therefore any dd that is followed by dt or is the first child of the dl (since, for whatever reason, this is allowed).

I also haven't found a pure CSS solution. I was toying around with multiple rules such that all that would remain would be (in your case) the "empty" dt, but nothing all inclusive.

If I get that to work, I'll let you know. Otherwise, the solution that is selector-like (thus keeping any other selector syntax intact) is the jquery non-css :has() selector. So in your case:

$("dt:not(:has(+dd))").addClass("empty_def");
$("dt:has(+dd)").addClass("non_empty_def");

You want the sibling selector:

DT + DD { color : #00f; } 

Doesn't work in IE6 but does in other browsers.