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

CSSの:notセレクタで特定の要素以外のすべての要素にスタイルを適用する方法

CSSの:not(selector)セレクタとは

指定した要素「以外」のすべての要素にスタイルを適用したい場合は、CSSの:not(selector)セレクタを使用します。このセレクタを使うことで、特定の要素を除外した残りの要素に対して、まとめてスタイルを設定することができます。

サンプルコード

以下のコードでは、:notセレクタを使って、p要素以外のすべての要素の文字色を青色に変更しています。実際にコードを実行して、動作を確認してみてください。

<!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>

実行結果のポイント

このコードを実行すると、見出し（h1、h2、h3）は青色で表示され、p要素で記述された段落だけが赤色で表示されます。これは、:not(p)セレクタによってp要素がスタイル適用の対象から除外され、それ以外のすべての要素に青色が適用されているためです。

このように:notセレクタを活用すると、除外したい要素だけを指定して、残りの要素に効率よくスタイルを適用できるため、コードの記述量を減らし、メンテナンス性の高いCSSを書くことができます。

  1. CSSの:only-childセレクターを使って、親の唯一の子であるすべての<p>要素にスタイルを適用する方法

    CSSの:only-childセレクターを使用すると、親要素内で唯一の子要素として存在する<p>要素だけを選択し、スタイルを適用することができます。兄弟要素が1つでも存在する場合、その要素は対象外となるため、特定の構造を持つHTMLに対してピンポイントでデザインを指定したいときに非常に便利です。 :only-childセレクターの基本構文 p:only-child { /* スタイルの指定 */ } 実装例 以下のコードでは、2つの<div>要素の中に<p>タグが配置されています。最初の<div>には<p>要素が1つだけ含まれてい

  2. CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説

    CSSを使ってhr要素（水平線）のスタイルを設定するには、borderプロパティを活用します。hr要素はデフォルトではシンプルな1本の線として表示されますが、border-topやborder-radiusなどを組み合わせることで、実線・破線・二重線・点線・角丸など、さまざまなデザインに自由にカスタマイズできます。以下に、代表的な5種類の水平線スタイルを実装したサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <meta name="viewport" content="width=device-