Há um seletor CSS que seleciona um dt e os seus associados dd elementos?

Question

Definições de listas são uma ótima maneira de marcar informações, onde alguns palavra-chave está associada a um ou mais valores.

Uma vez que existe a associação semântica de um dt com um ou mais dd elementos, existe uma maneira de usar o CSS para selecionar esses itens associados.

Considere o seguinte html:

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

Se eu quero apresentar este dl como:

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

Eu preciso de uma maneira de dizer dt/dd par de número um float esquerda, obter uma borda, e assim por diante.

Agora, a única maneira que eu sei como fazer isso é fazer separado dls 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>

O que é atroz a partir de um ponto de vista semântico, esses itens são todos os membros de uma lista.

Então, há um seletor ou combinação de seletores, que me permitirá operar no dt/dd elemento grupos?

Atualização

O que eu estou procurando/propondo é algo como um pseudo-elemento list-item, onde dl:list-item seleccionar um dt e de todos os associados dd elementos como um item, em muito da mesma maneira como o first-line o pseudo-elemento permite selecionar um grupo de caracteres como uma unidade.

Answer 1

Isso é uma resposta à resposta de Knittl. Não há espaço ou capacidade de responder adequadamente à resposta de Knitt em um comentário, e essa resposta não faz parte da pergunta, pois aborda a resposta para a pergunta. Então, eu vou em frente e postá -lo como uma resposta.

Knittl diz que o que estou procurando não é possível. Eu suspeitava que fosse esse o caso, mas eu poderia ter perdido algo ao ler vários padrões.

No entanto, o motivo fornecido é comprovadamente incorreto.

Knittl afirma:

Não, não há porque um <dt> pode ter múltiplo <dd>S e o contrário.

Se ele tivesse parado com 'não, não há' que teria sido a resposta correta.

Portanto, a alegação é que é impossível porque temos um número indeterminado de elementos no agrupamento proposto.

Essa reivindicação pode ser refutada diretamente, fornecendo um algoritmo para produzir um conjunto de elementos relacionados para qualquer conjunto de elementos DT e DD que sejam filhos de um DL. Além disso, pode ser refutado pelo contador de exemplo de um elemento pseudo-elemento existente que opera sobre uma parte indeterminada do documento.

A lógica para implementar um elemento pseudo-elemento que grupos relacionados a elementos DT e DD não é difícil. Portanto, o número de elementos de qualquer tipo não é pertinente.

Para um determinado elemento DL:

• Especifique um tipo de coleção para conter dt e dd elementos chamados a dt_dd_group
• Iniciar uma coleção de dt_dd_groups chamado all_groups
• Inspecione cada elemento filho (não recorrente):
  • Se o elemento for um dt:
    • Se este é o primeiro elemento ou o elemento anterior não foi um dt:
      • Crie um novo dt_dd_group
      • Anexar o novo dt_dd_group para all_groups
      • Anexar o elemento ao dt_dd_group
    • Caso contrário, anexar o elemento à corrente dt_dd_group
  • Caso contrário, se o elemento for um DD:
    • Se este é o primeiro elemento:
      • Crie um novo dt_dd_group
      • Anexar o novo dt_dd_group para all_groups
      • Anexar o elemento ao dt_dd_group
    • Anexar o elemento ao atual dt_dd_group
• Coleção de retorno all_groups

Esse algoritmo particiona facilmente um conjunto de elementos DT/DD dentro de um DL em conjuntos relacionados. Para qualquer DL legal, incluindo o caso compatível, mas patológico, em que nenhum elemento TD inicial é fornecido:

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

Dizer que esse modo de seleção é impossível devido ao número indeterminado ou aos elementos DT ou DD nesse grupo, é mostrado como falso. O número de letras na primeira linha de um parágrafo também é indeterminado, mas o :first-line O elemento pseudo-elemento faz parte dos padrões CSS.

É razoável dizer que o modo de seleção que estou procurando não é possível porque o CSS Working Group não considerou o problema ou que eles o consideraram e optaram por não incluí -lo nos padrões atuais por algum motivo.

Portanto, em somato, enquanto um seletor que opera em um grupo de tags DT e DD semanticamente relacionadas é teoricamente possível, nenhum seletor foi implementado.

Answer 2

Não, não há porque um <dt> pode ter múltiplo <dd>S e o contrário.

mas talvez:

dt + dd {  }

é suficiente no seu caso

Answer 3

Como sobre o uso de uma IDENTIFICAÇÃO em combinação com uma gerais irmão combinator?

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

Confira este violino, parece fazer o que você quiser ... http://jsfiddle.net/6qEHQ/