1

I am attempting to target a <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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Eric Taylor
  • 11
  • 3
  • http://stackoverflow.com/questions/1817792/css-previous-sibling-selector – Michael Mior Sep 15 '10 at 17:38
  • Also, I should note that `dd` should be preceded by `dt`. – Michael Mior Sep 15 '10 at 17:41
  • After reading through the linked question, I still don't have a solution. As stated, I know you can target an element when preceded by another element; however, I need to target an element only when it is followed by another element. – Eric Taylor Sep 16 '10 at 15:07

3 Answers3

1

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...

Jonathan Miller
  • 1,786
  • 1
  • 16
  • 26
0

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");
Anthony
  • 36,459
  • 25
  • 97
  • 163
-3

You want the sibling selector: 

DT + DD { color : #00f; }

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

furtive
  • 1,669
  • 2
  • 13
  • 15