:not pseudo-class セレクターを使用して、基準を満たさない要素の CSS スタイルを選択する方法

:not pseudo-class セレクターを使用して、条件を満たさない要素の CSS スタイルを選択する方法

CSS では、要素を選択するためにセレクターをよく使用します。特定の条件要素を満たし、それらにスタイルを適用します。ただし、場合によっては、特定の基準を満たさない要素を選択し、それらに別のスタイルを適用する必要があります。現時点では、:not 擬似クラス セレクターを使用できます。

: 擬似クラスではないセレクターを使用すると、セレクターのセットを指定することで一部の要素を除外し、これらのセレクターに一致しない要素のみを選択できます。その基本的な構文は次のとおりです。

:not(selector)

ここで、selector は、除外される要素を示す有効な CSS セレクターです。タグ セレクター、クラス セレクター、ID セレクター、またはその他の種類のセレクターを使用できます。

これは、:not 擬似クラス セレクターを使用した例です:

HTML コード:

<ul>
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

CSS コード:

.item {
  color: red;
}

li:not(.item) {
  color: blue;
}

上記の例では、最初の 3 つのリスト項目には「item」というクラス名があり、最後の 2 つのリスト項目にはクラス名がありません。最初の 3 つのリスト項目に赤いテキストの色を適用し、最後の 2 つのリスト項目に青いテキストの色を適用したいと考えています。

この効果は、:not 擬似クラス セレクターを使用し、クラス名「.item」の要素を除外することで実現できます。

ドキュメント全体を通じて、クラス名「.item」を持つ要素を除くすべての li 要素に青色のテキストの色が適用されます。また、クラス名「.item」の要素には赤い文字色が適用されます。

:not 擬似クラス セレクターを使用すると、特定の条件を満たさない要素をより柔軟に選択し、それらにスタイルを適用できます。これは、特定の状況、特に特定のタイプまたは条件以外の要素に対して特別な処理を実行する必要がある場合に非常に役立ちます。

:not 擬似クラス セレクターは、一部の古いバージョンのブラウザーと互換性がない可能性があることに注意してください。したがって、使用する場合はテストと互換性を考慮する必要があります。さらに、セレクターの複雑さがパフォーマンスに影響を与える可能性があるため、セレクターを使用する場合は注意してください。

要約すると、:not 擬似クラス セレクターを使用すると、特定の条件を満たさない要素を選択し、それらに異なるスタイルを適用できます。その構文はシンプルかつ明確で使いやすく、場合によっては柔軟性と使いやすさが向上します。

以上が:not pseudo-class セレクターを使用して、基準を満たさない要素の CSS スタイルを選択する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。