css - CSSを使用して、ツリー内の上位n層の親を選択しますか?

Question

20 以上の div レイヤーを持つ比較的複雑な DOM 構造を持つアプリがあります。

ツリーの途中にdiv がある場合、CSS を使用してツリー内のnclass="active"層の親を選択するにはどうすればよいですか?

たとえば、次のツリーで大文字 (4 層上) でマークされた div を選択するにはどうすればよいですか? :

<DIV>
  <div>
    <div>
      <div>
        <div class="active">
        </div>
      </div>
      <div>
      </div>
    </div>
  </div>
</DIV>

最初の子を考慮して同じですか？ツリーの下の最初の子n層を選択する方法は?

score 2 · Accepted Answer

残念ながら、親セレクターのようなものはありません。手で、またはサーバー側のコードを使用して、または JavaScript を使用して、目的の要素にクラスを直接設定する必要があります。

score 0 · Accepted Answer

この記事に基づいて、CSS4 Previewというタイトルが付けられていることがわかりました。CSS4 では、親要素のスタイルを設定できます。この記事は、次のような親要素のスタイルを設定できることを示しています。

$div > div > div > div.active { border: 1px solid #ccc; }

(与えられた例ではdiv、に関連するツリーでネストされた 3 つのレイヤーをスタイルしますdiv.active)

私のアプリに戻ると、PHP とインライン CSS を使用して、 n (ネストの深さ)を制御できます。

ただし、CSS4 までは、ある種の jQuery ソリューションを使用します。

2 に答える 2