Existe-t-il un sélecteur CSS qui sélectionne un dt et ses éléments dd associés?

StackOverflow https://stackoverflow.com/questions/1429483

  •  07-07-2019
  •  | 
  •  

Question

Les listes de définitions sont un excellent moyen de baliser des informations lorsqu'un mot-clé est associé à une ou plusieurs valeurs.

Puisqu'il existe une association sémantique d'un dt avec un ou plusieurs éléments dd, existe-t-il un moyen d'utiliser CSS pour sélectionner ces éléments associés?

Considérez le code HTML suivant: 

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

Si je veux présenter ce dl en tant que: 

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

J'ai besoin d'un moyen de dire que la paire numéro un / jour reste à gauche, d'obtenir une bordure, etc.

Pour le moment, la seule façon pour moi de le faire est de créer des dls distincts pour chaque ensemble d'éléments 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>

Ce qui est atroce d’un point de vue sémantique, ces éléments sont tous membres d’une même liste.

Y a-t-il donc un sélecteur ou une combinaison de sélecteurs qui me permet d'opérer sur les groupes d'éléments dt / dd?

Mettre à jour

Ce que je recherche / propose ressemble à un pseudo-élément list-item, où dl: list-item sélectionnerait un dt élément et tous les dd éléments associés en un seul élément, de la même manière que le first-line pseudo-élément permet de sélectionner un groupe de caractères comme une unité.

Était-ce utile?

La solution 2

Ceci est une réponse à la réponse de Knittl. Il n'y a pas de place ou la capacité de répondre adéquatement à la réponse de Knittl dans un commentaire, et cette réponse ne fait pas partie de la question, car elle répond à la réponse à la question. Donc, je vais aller de l'avant et le poster comme une réponse.

knittl dit que ce que je cherche n'est pas possible. Je pensais que c'était le cas, mais j'aurais pu rater quelque chose en lisant diverses normes.

Cependant, la raison fournie est manifestement incorrecte.

knittl affirme:

  

non, il n'y a pas & # 8217; t parce qu'un <dt> peut   avoir plusieurs <dd> s et dans l'autre sens   rond.

S'il s'était arrêté avec "non, il n'y en avait pas", la réponse aurait été correcte.

Donc, l’affirmation est qu’il est impossible, car nous avons un nombre indéterminé d’éléments dans le regroupement proposé.

Cette affirmation peut être réfutée directement en fournissant un algorithme pour produire un ensemble d’éléments liés pour tout ensemble d’éléments dt et dd qui sont les enfants d’un dl. En outre, cela peut être réfuté par le contre-exemple d’un pseudo-élément existant agissant sur une partie indéterminée du document.

La logique pour implémenter un pseudo-élément qui regroupe les éléments dt et dd associés n’est pas difficile. Donc, le nombre d'éléments de chaque type n'est pas germanique.

Pour un élément DL donné:

  • Spécifiez un type de collection contenant dt et dd éléments appelés dt_dd_group
  • Démarrer une collection de all_groups s appelés :first-line
  • Inspectez chaque élément enfant (non récursif):
    • Si l'élément est un dt:
      • S'il s'agit du premier élément ou si l'élément précédent n'était pas un <=>:
        • Créer un nouveau <=>
        • Ajouter le nouveau <=> à <=>
        • Ajouter l'élément à la <=>
      • Sinon, ajoutez l'élément au courant <=>
    • Sinon si l'élément est un dd:
      • S'il s'agit du premier élément:
        • Créer un nouveau <=>
        • Ajouter le nouveau <=> à <=>
        • Ajouter l'élément à la <=>
      • Ajouter l'élément à l'élément en cours <=>
  • Retourner la collection <=>

Cet algorithme partitionne facilement un ensemble d'éléments dt / dd au sein d'une dl en ensembles liés. Pour tout dl légal, y compris le cas conforme mais pathologique où aucun élément dt initial n'est fourni: 

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

Dire que ce mode de sélection est impossible en raison du nombre indéterminé ou des éléments dt ou dd dans un tel groupe s’avère faux. Le nombre de lettres dans la première ligne d'un paragraphe est également indéterminé. Cependant, le pseudo-élément fait partie des normes CSS.

Il est raisonnable d'affirmer que le mode de sélection que je recherche n'est pas possible car le groupe de travail CSS n'a pas examiné la question, ou qu'il a choisi de ne pas l'inclure dans les normes actuelles pour une raison quelconque.

Ainsi, en résumé, alors qu’un sélecteur qui agit sur un groupe de balises dt et dd liées sémantiquement est théoriquement possible, aucun sélecteur de ce type n’a été implémenté .

Autres conseils

Non, il n'y a pas & # 8217; T parce qu'un <dt> peut avoir plusieurs <dd> s et inversement.

mais peut-être: 

dt + dd {  }

est suffisant dans votre cas

Pourquoi ne pas utiliser un identifiant en combinaison avec un combinateur général de même niveau? 

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

Découvrez ce violon, il semble faire ce que vous voulez ... http://jsfiddle.net/6qEHQ/

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top