Gibt es einen CSS-Selektor, der ein dt und die zugehörigen dd-Elemente auswählt?

Question

Definitionslisten eignen sich hervorragend zum Markieren von Informationen, bei denen ein Schlüsselwort mit einem oder mehreren Werten verknüpft ist.

Da besteht die semantische Assoziation eines dt mit ein oder mehr dd-Elemente, gibt es eine Möglichkeit, CSS zu verwenden, um diese zugehörigen Elemente auszuwählen?

Betrachten Sie den folgenden HTML-Code:

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

Wenn ich diesen DL wie folgt präsentieren möchte:

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

Ich brauche eine Möglichkeit zu sagen, dass dt/dd-Paar Nummer eins nach links schwebt, einen Rand erhält und so weiter.

Im Moment weiß ich nur, wie das geht, indem ich für jeden Satz von dt/dd-Elementen separate DLs erstelle:

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

Was aus semantischer Sicht grausam ist, sind diese Elemente alle Mitglieder einer Liste.

Gibt es also einen Selektor oder eine Kombination von Selektoren, mit denen ich dt/dd-Elementgruppen bearbeiten kann?

Aktualisieren

Was ich suche/vorschlage, ist so etwas wie ein Pseudoelement list-item, wobei dl:list-item a auswählen würde dt und alle damit verbundenen dd Elemente als ein Element, ähnlich wie die first-line Pseudoelement ermöglicht die Auswahl einer Gruppe von Zeichen als Einheit.

Answer 1

Dies ist eine Antwort auf Knittls Antwort. Es gibt keinen Platz oder die Fähigkeit, in einem Kommentar angemessen auf Knittls Antwort zu antworten, und diese Antwort ist nicht Teil der Frage, da sie die Antwort auf die Frage befasst. Also werde ich es als Antwort veröffentlichen.

Knittl sagt, dass das, wonach ich suche, nicht möglich ist. Ich vermutete, dass dies der Fall war, aber ich hätte etwas verpassen können, als ich verschiedene Standards las.

Der Grund dafür ist jedoch nachweislich falsch.

Knittl behauptet:

Nein, das gibt es nicht, weil a <dt> kann mehrere haben <dd>s und umgekehrt.

Wenn er mit "Nein" angehalten hätte, wäre das nicht die richtige Antwort gewesen.

Die Behauptung ist also, dass es unmöglich ist, weil wir eine unbestimmte Anzahl von Elementen in der vorgeschlagenen Gruppierung haben.

Diese Behauptung kann direkt widerlegt werden, indem ein Algorithmus zur Herstellung einer Reihe verwandter Elemente für jede Reihe von DT- und DD -Elementen erstellt wird, die Kinder eines DL sind. Darüber hinaus kann es durch das Gegenbeispiel eines vorhandenen Pseudoelements widerlegt werden, das über einen unbestimmten Teil des Dokuments arbeitet.

Die Logik zur Implementierung eines Pseudoelements, das Gruppen in Bezug auf DT- und DD-Elemente gruppiert, ist nicht schwierig. Die Anzahl der Elemente eines der beiden Typen ist also nicht von Germane.

Für ein bestimmtes DL -Element:

• Geben Sie einen zum enthaltenen Sammelart an dt und dd Elemente genannt a dt_dd_group
• Starten eine Sammlung von dt_dd_groups genannt all_groups
• Überprüfen Sie jedes untergeordnete Element (nicht rekursiv):
  • Wenn das Element ein DT ist:
    • Wenn dies das erste Element oder das vorherige Element ist, war kein a dt:
      • Erstelle eine neue dt_dd_group
      • Gehen Sie das neue an dt_dd_group zu all_groups
      • Fügen Sie das Element dem an dt_dd_group
    • Sonst hängen Sie das Element an den Strom an dt_dd_group
  • Ansonsten, wenn das Element ein DD ist:
    • Wenn dies das erste Element ist:
      • Erstelle eine neue dt_dd_group
      • Gehen Sie das neue an dt_dd_group zu all_groups
      • Fügen Sie das Element dem an dt_dd_group
    • Fügen Sie das Element dem Strom an dt_dd_group
• Rücklaufsammlung all_groups

Dieser Algorithmus partitioniert leicht eine Reihe von DT/DD -Elementen innerhalb eines DL in verwandte Sätze. Für alle legalen DL, einschließlich des konformen, aber pathologischen Falls, in dem keine anfänglichen DT -Elemente bereitgestellt werden:

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

Zu sagen, dass diese Art der Auswahl aufgrund der unbestimmten Zahl oder der DT- oder DD -Elemente in einer solchen Gruppe unmöglich ist, wird als falsch gezeigt. Die Anzahl der Buchstaben in der ersten Zeile eines Absatzes ist ebenfalls unbestimmt, doch die :first-line Pseudoelement ist Teil der CSS-Standards.

Es ist vernünftig zu sagen, dass die Art der Auswahl, die ich suche, nicht möglich ist, da die CSS -Arbeitsgruppe das Problem nicht berücksichtigt hat oder dass sie es in Betracht gezogen haben und es aus irgendeinem Grund nicht in aktuelle Standards einbezogen haben.

Zusammenfassend ist ein Selektor, der auf einer Gruppe von semantisch verwandten DT- und DD -Tags arbeitet, theoretisch möglich, Es wurde kein solcher Selektor implementiert.

Answer 2

Nein, das gibt es nicht, weil a <dt> kann mehrere haben <dd>s und umgekehrt.

aber vielleicht:

dt + dd {  }

ist in Ihrem Fall genug

Answer 3

Wie wäre es mit der Verwendung einer ID in Kombination mit einem allgemeinen Geschwisterkombinator?

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

Schauen Sie sich diese Geige an, sie scheint zu tun, was Sie wollen ... http://jsfiddle.net/6qEHQ/