はあるのでCSSセレクタを選択するdtが、それに関連するddかね。
-
07-07-2019 - |
質問
定義リストをよりよく理解できるように、今後のマークアップ情報の一部をキーワードは一つ以上の値です。
があるのでセマンティック協会のdtと 一つ以上の dd要素があるので、使用CSSを選択しこれらの関連する項目です。
考え、以下のhtml:
<dl>
<dt>Foo</dt><dd>foo</dd>
<dt>Bar</dt><dd>bar</dd>
<dt>Baz</dt><dd>baz</dd>
</dl>
したい場合は現在このdlて
------- ------- -------
| Foo | | Bar | | Baz |
| foo | | bar | | baz |
------- ------- -------
しか必要と言うdt/ddペアの一番のfloat左、ボーダーです。
今、なだけは知っていこう別のdls各セット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>
る凶悪から意味的な観点、これらの項目は全員の一覧です。
であるセレクタの組み合わせセレクタをそのままにさせて頂く運dt/dd要素のでしょうか。
更新
どん/提案さんは、この疑似要素 list-item
, がダウンロード数:リストの項目が選択 dt
すべての関連 dd
要素としてのアイテムは同一であるということである first-line
疑似要素であるグループを選択文字の単位となるものです。
解決 2
これは、knittlの回答に対するものです。コメントでknittlの回答に適切に応答する余地も機能もありません。この回答は質問への回答を扱っているため、質問の一部ではありません。そこで、回答として投稿します。
knittlは、私が探しているものは不可能だと言っています。私はそうだったのではないかと疑っていましたが、さまざまな規格を読んでいるときに何かを見逃していたかもしれません。
ただし、提供される理由は明らかに間違っています。
knittlアサート:
いいえ、
&lt; dt&gt;
は 複数の&lt; dd&gt;
があり、その逆 ラウンド。
彼が「いいえ」で停止した場合、それは正解でした。
つまり、提案されたグループ化の要素の数は不定なので、不可能だという主張です。
この主張は、dlの子であるdtおよびdd要素のセットに関連する要素のセットを生成するアルゴリズムを提供することにより、直接反証することができます。さらに、ドキュメントの不確定な部分で動作する既存の擬似要素の反例によって反証することができます。
関連するdt要素とdd要素をグループ化する擬似要素を実装するロジックは難しくありません。したがって、どちらのタイプの要素の数も密接な関係はありません。
特定のDL要素の場合:
-
dt_dd_group
と呼ばれる -
all_groups
という - 各子要素を検査する(非再帰的):
- 要素がdtの場合:
- これが最初の要素であるか、前の要素が
dt
でない場合:- 新しい
dt_dd_group
を作成します
- 新しい
dt_dd_group
をall_groups
に追加します
-
dt_dd_group
に要素を追加します
- 新しい
- そうでなければ、要素を現在の
dt_dd_group
に追加します
- これが最初の要素であるか、前の要素が
- 要素がddの場合:
- これが最初の要素の場合:
- 新しい
dt_dd_group
を作成します
- 新しい
dt_dd_group
をall_groups
に追加します
-
dt_dd_group
に要素を追加します
- 新しい
- 要素を現在の
dt_dd_group
に追加します
- これが最初の要素の場合:
- 要素がdtの場合:
- コレクション
all_groups
を返す
dt
および dd
要素を含むコレクションタイプを指定します
dt_dd_group
のコレクションを開始します
このアルゴリズムは、dl内のdt / dd要素のセットを関連セットに簡単に分割します。準拠しているが初期のdt要素が提供されていない病理学的なケースを含む、法的dlの場合:
<dl><dd>foo</dd><dd>bar</dd><dl>
この選択モードは数が不定であるため不可能であると言うか、そのようなグループのdtまたはdd要素は偽であることが示されています。段落の最初の行の文字数も不定ですが、:first-line
疑似要素はCSS標準の一部です。
CSSワーキンググループが問題を考慮しなかったため、または何らかの理由で現在の標準に含まれないことを選択したため、探している選択モードは不可能であると言うのは合理的です。
したがって、要約すると、セマンティックに関連するdtおよびddタグのグループを操作するセレクターは理論的には可能ですが、そのようなセレクターは実装されていません。
他のヒント
いいえ、&lt; dt&gt;
は複数の&lt; dd&gt;
を持つことができ、逆もまた同様です。
しかし多分:
dt + dd { }
あなたの場合には十分です
どのように利用IDと組み合わせ、一般の兄弟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>
こ怒しているように思えたいもの... http://jsfiddle.net/6qEHQ/