Is there a CSS selector that selects dt and related dd elements?

Question

Definition lists are a great way to label information when a keyword is associated with one or more values.

Since there is a semantic association of dt with one or more dd elements, is there a way to use CSS to select these related elements.

Consider the following html:

<dl> <dt>Foo</dt><dd>foo</dd> <dt>Bar</dt><dd>bar</dd> <dt>Baz</dt><dd>baz</dd> </dl> 

If I want to present this dl as:

 ------- ------- ------- | Foo | | Bar | | Baz | | foo | | bar | | baz | ------- ------- ------- 

I need a way to say dt / dd pair number one float on the left, get a border, etc.

Right now, the only way I know is to make a separate dls for each set of dt / dd elements:

 <dl> <dt>Foo</dt><dd>foo</dd> </dl> <dl> <dt>Bar</dt><dd>bar</dd> </dl> <dl> <dt>Baz</dt><dd>baz</dd> </dl> 

What is terrible from a semantic point of view, these elements are members of the same list.

So, is there a selector or combination of selectors that will allow me to work with dt / dd element groups?

Update

What I'm looking for / suggest is something like a list-item pseudo list-item element, where dl: list-item will select dt and all related dd items as one item, much like the first-line pseudo first-line element allows select a character group as a unit.

Answer 1

This is a response to knittl's answer. There is no place or ability to respond adequately to the knittl answer in the comment, and this answer is not part of the question because it solves the answer to the question. So, I will go over and send it as an answer.

knittl says that what I'm looking for is impossible. I suspected it was, but I might have missed something while reading various standards.

However, the reason given is clearly incorrect.

knittl states:

no, no, because <dt> can have multiple <dd> and vice versa rounds.

If he stopped, “no, no,” that would be the correct answer.

So, the statement is that this is impossible, because we have an indefinite number of elements in the proposed grouping.

This claim can be directly refuted by providing an algorithm for creating a set of related elements for any set of dt and dd elements that are children of dl. In addition, it can be refuted using a counter example of an existing pseudo-element that works on an undefined part of a document.

The logic for implementing a pseudo-element that groups related dt and dd elements is straightforward. Thus, the number of elements of any type is not native.

For this DL element:

• Specify a collection type containing dt and dd elements called dt_dd_group
• Run the dt_dd_group collection called all_groups
• Inspect each child (non-recursive):
  • If the item is dt:
    • If this is the first element or the previous element was not dt :
      • Create a new dt_dd_group
      • Add new dt_dd_group to all_groups
      • Add item to dt_dd_group
    • Else add item to current dt_dd_group
  • If the item is dd:
    • If this is the first element:
      • Create a new dt_dd_group
      • Add new dt_dd_group to all_groups
      • Add item to dt_dd_group
    • Add item to current dt_dd_group
• all_groups returned collection

This algorithm easily splits a set of dt / dd elements inside dl into related sets. For any legal dl, including a compatible, but pathological case, when the initial elements of dt are not specified:

 <dl><dd>foo</dd><dd>bar</dd><dl> 

Saying that this selection method is not possible due to an indefinite number or elements of dt or dd in such a group, as shown, is false. The number of letters in the first line of the paragraph is also uncertain, but the :first-line pseudo-element is part of the CSS standards.

It is reasonable to say that the selection method I am looking for is not possible because the CSS working group did not address this issue or consider it, and for some reason chose not to include it in existing standards.

So, in summation, while a selector that works with a group of semantically related dt and dd tags is theoretically possible, such a selector is not implemented .

Answer 2

no, no, because <dt> can have multiple <dd> and vice versa.

but probably:

 dt + dd { } 

enough in your case

Answer 3

What about using an identifier in combination with a common combination of siblings?

  <html> <head> <style type="text/css"> #id1 ~ DD { color: red; } #id2 ~ DD { color: blue; } </style> </head> <body> <dl> <dt id="id1">term 1</dt> <dd>def 1a</dd> <dd>def 1b</dd> <dt id="id2">term 2</dt> <dd>def 2a</dd> <dd>def 2b</dd> </dl> </body> </html>​​​​​​​​​​​​​​​ 

Check out this fiddle, it seems to do what you want ... http://jsfiddle.net/6qEHQ/