Hay un selector CSS que selecciona un dt y sus asociados dd elementos?
-
07-07-2019 - |
Pregunta
Definiciones de listas son una gran manera de marcar la información de donde algunos de los principales palabra está asociada con uno o más valores.
Porque no es la semántica de la asociación de un dt con uno o más dd elementos, hay una manera de usar CSS para seleccionar estos elementos asociados.
Considere el siguiente código html:
<dl>
<dt>Foo</dt><dd>foo</dd>
<dt>Bar</dt><dd>bar</dd>
<dt>Baz</dt><dd>baz</dd>
</dl>
Si quiero presentar esta lista de distribución como:
------- ------- -------
| Foo | | Bar | | Baz |
| foo | | bar | | baz |
------- ------- -------
Necesito una manera de decir dt/dd pareja número uno flotar a la izquierda, obtener un borde, y así sucesivamente.
Ahora mismo, la única manera que sé cómo hacerlo, es para separar las listas de distribución para cada conjunto de dt/dd elementos:
<dl>
<dt>Foo</dt><dd>foo</dd>
</dl>
<dl>
<dt>Bar</dt><dd>bar</dd>
</dl>
<dl>
<dt>Baz</dt><dd>baz</dd>
</dl>
Que es atroz desde un punto de vista semántico, estos elementos son todos los miembros de una lista.
Por lo que hay un selector o una combinación de selectores que me va a permitir operar en dt/dd grupos de elementos?
Actualización
Lo que estoy buscando/proponiendo es algo así como un pseudo-elemento list-item
, donde dl:elemento de lista seleccionar una dt
y todos los asociados dd
elementos como un solo elemento, de la misma manera como la first-line
pseudo-elemento permite seleccionar un grupo de caracteres como una unidad.
Solución 2
Esto es en respuesta a knittl la respuesta.No hay espacio o la capacidad de responder adecuadamente a knittl la respuesta en un comentario, y esta respuesta no es parte de la pregunta, como en ella se aborda la respuesta a la pregunta.Así que, voy a seguir adelante y publicar como una Respuesta.
knittl dice que lo que estoy buscando no es posible.Yo sospechaba que era el caso, pero yo podría haber perdido algo, cuando de la lectura de diversas normas.
Sin embargo, la razón siempre es manifiestamente incorrecta.
knittl afirma:
no, no la hay porque una
<dt>
puede tiene varios<dd>
s y de la otra manera la ronda.
Si él se había detenido con 'no,' que hubiera sido la respuesta correcta.
Así, el reclamo es que es imposible porque tenemos un número indeterminado de elementos en la propuesta de la agrupación.
Esta afirmación puede ser refutada directamente por la creación de un algoritmo para producir un conjunto de elementos relacionados de un conjunto de dt y dd elementos que son hijos de un dl.Además, puede ser refutada por el contra ejemplo de un pseudo-elemento que opera en más de un indeterminado parte del documento.
La lógica para implementar un pseudo-elemento que los grupos relacionados con el dt y dd elementos no es difícil.Por lo que el número de elementos de cualquier tipo no es pertinente.
Para un determinado elemento DL:
- Especificar un tipo de colección para contener
dt
ydd
elementos de la llamadadt_dd_group
- Iniciar una colección de
dt_dd_group
s llamaall_groups
- La inspección de cada elemento secundario (no recursiva):
- Si el elemento es un dt:
- Si este es el primer elemento o el elemento anterior no fue un
dt
:- Crear una nueva
dt_dd_group
- Anexar los nuevos
dt_dd_group
aall_groups
- Añadir el elemento a la
dt_dd_group
- Crear una nueva
- Otra cosa añadir el elemento a la actual
dt_dd_group
- Si este es el primer elemento o el elemento anterior no fue un
- Por el contrario, si el elemento es un dd:
- Si este es el primer elemento:
- Crear una nueva
dt_dd_group
- Anexar los nuevos
dt_dd_group
aall_groups
- Añadir el elemento a la
dt_dd_group
- Crear una nueva
- Añadir el elemento a la actual
dt_dd_group
- Si este es el primer elemento:
- Si el elemento es un dt:
- El retorno de la colección
all_groups
Este algoritmo fácilmente las particiones de un conjunto de dt/dd elementos dentro de una lista de distribución en conjuntos relacionados.Para cualquier legales dl, incluyendo el cumple pero patológicas de los casos donde no inicial dt elementos que se proporcionan:
<dl><dd>foo</dd><dd>bar</dd><dl>
Decir que este modo de selección es imposible debido a la número indeterminado o dt o dd elementos en un grupo es demostrado ser falsa.El número de cartas en la primera línea de un párrafo también es indeterminado, sin embargo, la :first-line
pseudo-elemento es parte de la CSS estándares.
Es razonable decir que el modo de selección de estoy buscando no es posible porque el CSS Grupo de Trabajo no consideró la cuestión, o que la consideraban y se optó por no incluir en las normas actuales, por alguna razón.
Así que, en resumen, mientras que un selector que funcionan en un grupo de semánticamente relacionados con el dt y dd etiquetas es teóricamente posible, no hay tal selector ha sido implementado.
Otros consejos
no, no hay & # 8217; t porque un <dt>
puede tener múltiples <dd>
sy viceversa.
pero tal vez:
dt + dd { }
es suficiente en tu caso
¿Qué tal usar una ID en combinación con un combinador general de hermanos?
<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>
Mira este violín, parece hacer lo que quieres ... http://jsfiddle.net/6qEHQ/