web-dev-qa-db-ja.com

親/祖先要素のCSS否定擬似クラス：not（）

これは私を夢中にさせています：

HTML：

<div><h1>Hello World!</h1></div>

CSS：

*:not(div) h1 { color: #900; }

「div要素ではない祖先を持つすべてのh1要素を選択してください...」したがって、「Hello World！」赤色にしないでください、それでもまだです。

上記のマークアップでは、子コンビネーターの追加が機能します。

*:not(div) > h1 { color: #900; }

ただし、div要素の子でない場合、h1要素には影響しません。例えば：

<div><article><h1>Hello World!</h1></article></div>

div要素の子ではなく、子孫としてh1要素を指定したいのはそのためです。誰でも？

htmlcsscss3css-selectors
62
charles

これは、「div要素ではない祖先を持つすべての_h1_要素を選択しますか？」

します。しかし、一般的なHTMLドキュメントでは、every_h1_には、div要素ではない少なくとも2つの祖先があり、それらの祖先bodyとhtmlに他なりません。

これは、:not()を使用して祖先をフィルタリングしようとする場合の問題です。特に、:not()がタイプセレクターなどの他のセレクターによって修飾されていない場合、クラスセレクター、例えば.foo:not(div)。すべての_h1_要素にスタイルを適用し、それらを_div h1_でオーバーライドするだけで、はるかに簡単になります。

Selectors 4 では、:not()が拡張され、子孫コンビネーターを含むコンビネーターを含む完全な複雑なセレクターを受け入れるようになりました。これが高速プロファイル（およびCSS）に実装されるかどうかはテストと確認が必要ですが、実装されると、が可能になります特定の祖先を持つ要素を除外するために使用します。セレクタの動作方法により、確実に動作するためには、祖先ではなく要素自体で否定を行う必要があります。したがって、構文は少し異なります。

_h1:not(div h1) { color: #900; }
_

JQueryに精通している人なら誰でも、 このセレクタが今日jQuery で機能することをすぐに指摘するでしょう。これは、 セレクター3の:not()とjQueryの:not() の間の多くの不一致の1つであり、セレクター4が修正しようとしています。

71
BoltClock

_<html>_要素は_<div>_ではありません。 _<body>_要素は_<div>_ではありません。

したがって、「_<div>_ではない祖先がある」という条件は、すべての要素に当てはまります。

_>_（子）セレクターを使用できない限り、あなたがしようとしていることを実行できるとは思わない-それは本当に意味をなさない。 2番目の例では、_<article>_はdivではないため、*:not(div)にも一致します。

14
RichieHindle