Существует ли CSS-селектор, который выбирает dt и связанные с ним элементы dd?
-
07-07-2019 - |
Вопрос
Списки определений - отличный способ разметить информацию, в которой какое-либо ключевое слово связано с одним или несколькими значениями.
Поскольку существует семантическая ассоциация 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:элемент списка выбрал бы dt
и все связанные с этим dd
элементы как один элемент, во многом таким же образом, как first-line
псевдоэлемент позволяет выделить группу символов как единое целое.
Решение 2
Это в ответ на ответ найттла.В комментарии нет места или возможности адекватно ответить на ответ найттла, и этот ответ не является частью вопроса, поскольку он адресует ответ на вопрос.Итак, я продолжу и опубликую это в качестве ответа.
книттл говорит, что то, что я ищу, невозможно.Я подозревал, что так оно и есть, но я мог что-то упустить, читая различные стандарты.
Однако приведенная причина явно неверна.
книттл утверждает:
нет, этого не происходит, потому что
<dt>
может иметь несколько<dd>
s и наоборот круглый.
Если бы он остановился на "нет, такого не существует", это был бы правильный ответ.
Итак, утверждение состоит в том, что это невозможно, поскольку у нас есть неопределенное количество элементов в предлагаемой группировке.
Это утверждение может быть опровергнуто непосредственно путем предоставления алгоритма для создания набора связанных элементов для любого набора элементов 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
- Если это первый элемент:
- Если элемент является dt:
- Возвратная коллекция
all_groups
Этот алгоритм легко разбивает набор элементов dt / dd внутри dl на связанные наборы.Для любого легального dl, включая совместимый, но патологический случай, когда исходные элементы dt не предусмотрены:
<dl><dd>foo</dd><dd>bar</dd><dl>
Утверждение о том, что этот способ выбора невозможен из-за неопределенного количества элементов dt или dd в такой группе, является ложным.Количество букв в первой строке абзаца также не определено, однако :first-line
псевдоэлемент является частью стандартов CSS.
Разумно сказать, что режим выбора, который я ищу, невозможен, потому что рабочая группа CSS не рассматривала этот вопрос, или что они рассмотрели его и по какой-то причине решили не включать в текущие стандарты.
Итак, подводя итог, в то время как селектор, работающий с группой семантически связанных тегов dt и dd, теоретически возможен, такой селектор не был реализован.
Другие советы
нет, этого не происходит, потому что <dt>
может иметь несколько <dd>
s и наоборот.
но, может быть:
dt + dd { }
в вашем случае этого достаточно
Как насчет использования идентификатора в сочетании с общим комбинатором-братом?
<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/