css - cssでの前向きな先読み

Question

Perlの正規表現では、ポジティブな先読みの概念を知っています。つまりq(?=u)、uを一致の一部にすることなく、aqの後にauが続く一致です。私はcssで似たようなものを探しています：私はdiv、に続いて兄弟を一致させたいですdiv.specialClass。

<div>..</div>  <!-- div to match -->
<div class="specialClass">..</div>

私は+で遊んだことがありますがdiv.specialClass、それはと一致しますが、前のは必要ですdiv。

score 10 · Accepted Answer

セレクターのどの部分がサブジェクトであるかをまだ宣言することはできません。$サブジェクトは、おそらくor!構文を使用して移動する権限が得られるまで、CSSのセレクターの最後の要素です。

// Always selects the .specialClass div which follows another div
div + div.specialClass {
    color: red;
}

将来的には、おそらく次の構文を使用して、最初のdivをサブジェクトにすることができるようになります。

// Selects any `div` preceding any `div.specialClass`
$div + div.specialClass { // or maybe div! + div.specialClass
    color: red;
}

暫定的な回避策は、JavaScriptを使用することだけです。jQueryのようなツールは、これを非常に簡単にします。

$("div + div.specialClass").prev();

これは、div任意の直前のすべての要素への参照になりましたdiv.specialClass。

score 0 · Accepted Answer

今はあまり役に立ちませんが、

将来的には、CSS4セレクター:has()を使用することができます。

現時点では、ブラウザとの互換性はまったくありません。

div:has(+div.specialClass)

2 に答える 2