Есть ли селектор CSS, который выбирает dt и связанные с ним элементы dd?

Question

Списки определений являются отличным способом разметки информации, в которой какое-либо ключевое слово связано с одним или несколькими значениями.

Поскольку существует семантическая ассоциация dt с одним или несколькими элементами dd, существует ли способ использовать CSS для выбора этих связанных элементов.

Рассмотрим следующий html:

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

Если я хочу представить этот dl как:

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

Мне нужен способ сказать, что пара dt / dd номер один плавает влево, получить границу и т. Д.

Прямо сейчас, единственный способ, которым я знаю, как это сделать, - создать отдельные dls для каждого набора элементов dt / dd:

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

Что является жестоким с семантической точки зрения, все эти элементы являются членами одного списка.

Так есть ли селектор или комбинация селекторов, которые позволят мне работать с группами элементов dt / dd?

Обновление

Я ищу / предлагаю что-то вроде псевдоэлемента list-item, где dl: ​​list-item выберет dt и все связанные dd элементы как один элемент, во многом так же псевдоэлемент first-line позволяет выбрать группу символов как единое целое.

Answer 1

нет, потому что <dt> может иметь несколько <dd> с и наоборот.

но возможно:

dt + dd {  }

достаточно в вашем случае

Answer 2

Это ответ на Knittl. Нет места или возможности адекватно ответить на ответ knittl в комментарии, и этот ответ не является частью вопроса, поскольку он направлен на ответ на вопрос. Итак, я продолжу и опубликую это как Ответ.

Книттл говорит, что то, что я ищу, невозможно. Я подозревал, что это так, но я мог что-то упустить при чтении различных стандартов.

Однако указанная причина явно неверна.

Книттл утверждает:

нет, не потому, что <dt> может иметь несколько <dd> с и наоборот круглый.

Если бы он остановился на «нет, нет», это был бы правильный ответ.

Итак, утверждение состоит в том, что это невозможно, потому что у нас есть неопределенное количество элементов в предлагаемой группировке.

Это утверждение можно опровергнуть напрямую, предоставив алгоритм для создания набора связанных элементов для любого набора элементов dt и dd, которые являются дочерними для dl. Кроме того, это может быть опровергнуто контрпримером существующего псевдоэлемента, который работает над неопределенной частью документа.

Логика для реализации псевдоэлемента, который группирует связанные элементы dt и dd, не сложна. Таким образом, количество элементов любого типа не имеет значения.

Для данного элемента DL:

• Укажите тип коллекции, содержащий элементы dt и dd, называемые dt_dd_group
• Запустить коллекцию из dt_dd_group с именем all_groups
• Проверьте каждый дочерний элемент (не рекурсивный):
  • Если элемент dt:
    • Если это первый элемент или предыдущий элемент не был dt:
      • Создать новый dt_dd_group
      • Добавить новый dt_dd_group к all_groups
      • Добавить элемент к dt_dd_group
    • Остальное добавить элемент к текущему dt_dd_group
  • Иначе, если элемент является dd:
    • Если это первый элемент:
      • Создать новый dt_dd_group
      • Добавить новый dt_dd_group к all_groups
      • Добавить элемент к dt_dd_group
    • Добавить элемент к текущему dt_dd_group
• Возврат коллекции all_groups

Этот алгоритм легко разбивает набор элементов dt / dd внутри dl на связанные наборы. Для любого легального dl, включая соответствующий, но патологический случай, когда не предоставлены начальные элементы dt:

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

Сказать, что этот режим выбора невозможен из-за неопределенного числа или элементов dt или dd в такой группе, показывается как ложный. Количество букв в первой строке абзаца также не определено, но псевдоэлемент :first-line является частью стандартов CSS.

Разумно сказать, что режим выбора, который я ищу, невозможен, потому что рабочая группа CSS не рассматривала проблему или что они рассмотрели ее и решили не включать ее в текущие стандарты по какой-то причине.

Итак, в итоге, хотя теоретически возможен селектор, который работает с группой семантически связанных тэгов dt и dd, такой селектор не был реализован .

Answer 3

Как насчет использования идентификатора в сочетании с обычным братским комбинатором?

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

Посмотри на эту скрипку, она, кажется, делает то, что ты хочешь ... http://jsfiddle.net/6qEHQ/