Question

Definitions lists are a great way to mark up information where some key word is associated with one or more values.

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

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 left, get a border, and so forth.

Right now, the only way I know how to do this is to make 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>

Which is atrocious from a semantic point of view, these items are all members of one list.

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

Update

What I am looking for/proposing is something like a pseudo-element list-item, where dl:list-item would select a dt and all associated dd elements as one item, in much the same way as the first-line pseudo-element allows one to select a group of characters as a unit.

Answer 1

This is in response to knittl’s answer. There isn’t room or the capability to adequately respond to knittl’s answer in a comment, and this response is not part of the question, as it addresses the answer to the question. So, I’ll go ahead and post it as an Answer.

knittl says that what I am looking for is not possible. I suspected that was the case, but I could have missed something when reading various standards.

However, the reason provided is demonstrably incorrect.

knittl asserts:

no, there isn’t because a <dt> can
have multiple <dd>s and the other way
round.

If he had stopped with ‘no, there isn’t’ that would have been the correct answer.

So, the claim is that it is impossible because we have an indeterminate number of elements in the proposed grouping.

This claim can be disproved directly by providing an algorithm to produce a set of related elements for any set of dt and dd elements that are children of a dl. Further, it can be disproved by the counter example of an existing pseudo-element that operates over an indeterminate portion of the document.

The logic to implement a pseudo-element that groups related dt and dd elements is not difficult. So the number of elements of either type is not germane.

For a given DL element:

• Specify a collection type to contain dt and dd elements called a dt_dd_group
• Start a collection of dt_dd_groups called all_groups
• Inspect each child element (non-recursive):
  • If the element is a dt:
    • If this is the first element or the previous element was not a dt:
      • Create a new dt_dd_group
      • Append the new dt_dd_group to all_groups
      • Append the element to the dt_dd_group
    • Else append the element to the current dt_dd_group
  • Else if the element is a dd:
    • If this is the first element:
      • Create a new dt_dd_group
      • Append the new dt_dd_group to all_groups
      • Append the element to the dt_dd_group
    • Append the element to the current dt_dd_group
• Return collection all_groups

This algorithm easily partitions a set of dt/dd elements within a dl into related sets. For any legal dl, including the compliant but pathological case where no initial dt elements are provided:

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

To say that this mode of selection is impossible due to the indeterminate number or dt or dd elements in such a group is shown to be false. The number of letters in the first line of a paragraph is also indeterminate, yet the :first-line pseudo-element is part of the CSS standards.

It is reasonable to say that the mode of selection I am looking for is not possible because CSS Working Group did not consider the issue, or that they considered it and chose not to include it in current standards for some reason.

So, in summation, while a selector that operate on a group of semantically related dt and dd tags is theoretically possible, no such selector has been implemented.