特定のタグに遭遇するまでの子孫のCSSセレクタ

Question

特定のタグが見つかるまで、すべての子孫を選択するために使用できるCSSセレクタがあるのだろうかと思います。

たとえば、以下のDOM構造では、 "id1"にセレクタを追加して、 "id4"を除くすべての子孫をスタイルすることができます。つまり、divはclass1とclass2に対応します。私はid1とid4を事前に認識していますが、私はclass1とclass2を認識していません（私が "id4"を押すまでチェーン内にはもっと多くのものがあります）。私はclass1とclass2に対応するdivにスタイルを適用したいが、それ以外は何もしたくない。基本的にアプリケーションdivは既に何かに設定されているので、class1とclass2に対応するdivの位置を変更するだけです。

私は、理想的には、アプリケーションが「ディープ・ネスティング・オブ・既知のdiv-ここでは、」IDの下のdivのではなく、多数

<div id="id 1"> 
    <div class="class1"> 
     <div class="class2"> 
      <div id="id4"> 
       <div id="deep-nesting-of-known-divs-here"> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

を持っているので、私が使用していますすべてのdivを一覧表示することを避けるために希望します

私は、特定のサイトのSafariで奇妙な問題に遭遇したためです。私はページにiframeを注入している拡張機能を持っています。 iframeを注入した後、ページはid2とid3がid1とid4の間に挿入されるスクリプトを実行しているようです。その結果、iframeが正しく表示されません。

Answer 1

まず、IDが」上がりません最良の例は、その性格上、あなたがあなたの例で説明しているものとは異なり、ユニークで予測可能なものになるからです。

しかし、とにかく、あなたはそれを行う方法です - あなたはcssで "until"セレクタを取得しませんが、子要素をチェックすることができます。

/* style every div element that's not #id4 or a child of it */ 

#id1 :not(#id4) div:not(#id4) { 
    background-color: red; 
} 

---

：それはあなたがどちらのスタイル＃のID4またはそれの子、またはスタイルすべての要素ではなく、すべての要素が、その後、＃のID4またはそれの子供のすべての要素のために、あなたのスタイルをリセットできることを意味します

/* style every div, then reset divs that are #id4 or a child of it */ 

#id1 div { 
    background-color: red; 
} 

#id1 #id4, #id1 #id4 div { 
    background-color: transparent; 
} 

Answer 2

これを解決する最良の方法は、CSS擬似セレクタを使用することです。 documentation。それを解決する1つの方法は、すべてのクラスにidのクラス名を与え、次に.id:not(:last-child)を行うことです。おそらくそれを解決する良い方法がありますが、これは私のアプローチです:-)

Answer 3

おそらくすべての子孫のスタイルを設定してから#id4にリセットする必要があります。 attribute selectorsを使用します。また、あなたの子孫セレクタのために、もう少し具体的な得ることができる

#id1 div { 
    color: red; 
} 
#id1 #id4 { 
    color: black; 
} 

、その後、ターゲット要素のためにリセットします：

のようなものを試してみて、すべての

#id1 [id^="id"] { 
    color: red; 
} 
#id1 #id4 { 
    color: black; 
}