CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの:not()セレクターとは？指定した要素以外にスタイルを適用する方法

CSSの :not(セレクター) は、指定した要素「以外」のすべての要素にスタイルを適用するための否定疑似クラスです。特定の要素だけ除外したい場合に非常に便利で、コードをシンプルに保ちながら柔軟なスタイリングを実現できます。

:not()セレクターの基本的な動作

:not() の括弧内に指定したセレクターに一致しない要素がすべて対象になります。例えば、:not(p) と記述すれば、<p> 要素以外のすべての要素にスタイルが適用されます。

以下のコードでは、段落タグ（<p>）は赤色、それ以外の要素は青色で表示されます。実際にコードを実行して、:not セレクターの動作を確認してみましょう。

実装例

<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            color: red;
         }
         :not(p) {
            color: blue;
         }
      </style>
   </head>
   <body>
      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <h3>Heading 3</h3>
      <p>This is a paragraph.</p>
      <p>This is another paragraph.</p>
   </body>
</html>

コードの解説

  • p { color: red; } … すべての <p> 要素の文字色を赤に設定します。
  • :not(p) { color: blue; } … <p> 以外の要素（この例では h1・h2・h3）の文字色を青に設定します。

このように :not() を使うことで、「〜以外」という条件を簡潔に表現できます。特定のクラスやIDを除外したい場合にも応用でき、例えば .item:not(.active) のように記述すれば、「active クラスを持たない item 要素」だけにスタイルを適用することが可能です。

  1. CSSの:nth-last-of-type(n)セレクターとは？後ろから数えて要素を指定する方法

    CSSの:nth-last-of-type(n)セレクターは、親要素の中で同じ種類の兄弟要素を末尾（最後の子）から数えて、指定した順番に該当する要素を選択するための擬似クラスです。 例えば「:nth-last-of-type(2)」を指定すると、各親要素内で後ろから2番目に位置する<p>要素だけがスタイルの対象になります。通常の:nth-of-type()が先頭から数えるのに対し、:nth-last-of-type()は逆方向からカウントする点が大きな特徴です。 :nth-last-of-type(n)セレクターの基本構文 要素:nth-last-of-type(n) { /*

  2. CSSの:nth-last-child(n)セレクターとは？使い方と実装例を解説

    CSSの:nth-last-child(n)セレクターとは :nth-last-child(n)は、CSSの擬似クラスの一つで、親要素の子要素を末尾（最後の子）から数えてn番目に該当する要素を選択するためのセレクターです。 例えば、段落やリスト項目が多数並んでいる場合に、「先頭から」ではなく「最後から何番目か」という位置を基準にスタイルを適用したいときに便利です。要素の総数が動的に変化するコンテンツでも、末尾からの位置指定なら安定したデザイン制御が可能になります。 基本的な書き方 p:nth-last-child(4) { background: blue; color: white