Esiste un selettore CSS che seleziona un dt e gli elementi dd associati?

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

  •  07-07-2019
  •  | 
  •  

Domanda

Gli elenchi di definizioni sono un ottimo modo per contrassegnare le informazioni in cui una parola chiave è associata a uno o più valori.

Poiché esiste un'associazione semantica di un dt con uno o più elementi dd, esiste un modo per usare i CSS per selezionare questi elementi associati.

Considera il seguente html: 

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

Se voglio presentare questo dl come: 

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

Ho bisogno di un modo per dire che la coppia dt / dd numero uno galleggia a sinistra, ottiene un bordo e così via.

In questo momento, l'unico modo in cui so come fare è creare dls separati per ogni set di elementi 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>

Che è atroce da un punto di vista semantico, questi elementi sono tutti membri di un elenco.

Quindi c'è un selettore o una combinazione di selettori che mi permetterà di operare su gruppi di elementi dt / dd?

Aggiorna

Quello che sto cercando / proponendo è qualcosa di simile a uno pseudo-elemento list-item, dove dl: voce di elenco selezionerebbe un dt e tutti gli elementi dd associati come un elemento, più o meno allo stesso modo di lo pseudo-elemento first-line consente di selezionare un gruppo di caratteri come unità.

È stato utile?

Soluzione 2

Questo è in risposta alla risposta di Knittl. Non c'è spazio o la capacità di rispondere adeguatamente alla risposta di Knittl in un commento, e questa risposta non fa parte della domanda, poiché affronta la risposta alla domanda. Quindi, andrò avanti e pubblicherò come una risposta.

knittl dice che ciò che sto cercando non è possibile. Sospettavo che fosse così, ma avrei potuto perdere qualcosa leggendo vari standard.

Tuttavia, il motivo fornito è manifestamente errato.

afferma Knittl:

  

no, non c'è & # 8217; t perché un <dt> può   hanno più <dd> se viceversa   tondo.

Se si fosse fermato con "no, non c'è" quella sarebbe stata la risposta corretta.

Quindi, l'affermazione è che è impossibile perché abbiamo un numero indeterminato di elementi nel raggruppamento proposto.

Questa affermazione può essere smentita direttamente fornendo un algoritmo per produrre un set di elementi correlati per qualsiasi set di elementi dt e dd che sono figli di un dl. Inoltre, può essere confutato dal contro esempio di uno pseudo-elemento esistente che opera su una parte indeterminata del documento.

La logica per implementare uno pseudo-elemento che raggruppa gli elementi dt e dd correlati non è difficile. Quindi il numero di elementi di entrambi i tipi non è germano.

Per un dato elemento DL:

  • Specifica un tipo di raccolta per contenere dt e dd elementi chiamati dt_dd_group
  • Avvia una raccolta di all_groups s chiamata :first-line
  • Ispeziona ogni elemento figlio (non ricorsivo):
    • Se l'elemento è un dt:
      • Se questo è il primo elemento o l'elemento precedente non era un <=>:
        • Crea un nuovo <=>
        • Aggiungi il nuovo <=> a <=>
        • Aggiungi l'elemento a <=>
      • Altrimenti aggiungi l'elemento all'attuale <=>
    • Altrimenti se l'elemento è un dd:
      • Se questo è il primo elemento:
        • Crea un nuovo <=>
        • Aggiungi il nuovo <=> a <=>
        • Aggiungi l'elemento a <=>
      • Aggiungi l'elemento all'attuale <=>
  • Restituisci raccolta <=>

Questo algoritmo suddivide facilmente un set di elementi dt / dd all'interno di un dl in set correlati. Per qualsiasi dl legale, incluso il caso conforme ma patologico in cui non sono forniti elementi dt iniziali: 

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

Dire che questa modalità di selezione è impossibile a causa del numero indeterminato o degli elementi dt o dd in un tale gruppo viene mostrato come falso. Anche il numero di lettere nella prima riga di un paragrafo è indeterminato, tuttavia lo pseudo-elemento <=> fa parte degli standard CSS.

È ragionevole affermare che la modalità di selezione che sto cercando non è possibile perché il gruppo di lavoro CSS non ha preso in considerazione il problema, o che lo hanno considerato e hanno scelto di non includerlo negli standard attuali per qualche motivo.

Quindi, in sintesi, mentre un selettore che opera su un gruppo di tag dt e dd semanticamente correlati è teoricamente possibile, nessuno di questi selettori è stato implementato .

Altri suggerimenti

no, non c'è & # 8217; t perché un <dt> può avere più <dd> se viceversa.

ma forse: 

dt + dd {  }

è abbastanza nel tuo caso

Che ne dici di usare un ID in combinazione con un combinatore di pari livello? 

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

Dai un'occhiata a questo violino, sembra fare quello che vuoi ... http://jsfiddle.net/6qEHQ/

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top