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

CSSセレクターで特定のクラス・属性・タイプを持たない要素を選択する方法（:not()疑似クラス活用）

CSSの:not()疑似クラスを使うと、特定の値を持たない要素や、指定したセレクターに一致しない要素だけを対象にスタイリングを適用できます。これにより、より柔軟で精密なスタイル制御が可能になります。

基本構文

:not()は否定疑似クラスと呼ばれ、括弧内に指定したセレクターに一致しない要素を選択します。例えば、p:not(div>p)と書けば、「div要素直下の子要素ではないp要素」のみが選択されます。

例1：親子関係による除外

以下の例では、div要素直下にあるp要素以外のp要素に対して、異なるスタイルを適用しています。

<!DOCTYPE html>
<html>
<head>
<style>
p {
    background-color: cornflowerblue;
    color: white;
}
p:not(div>p) {
    background-color: khaki;
    font-size: 1.4em;
    font-style: italic;
    color: blue;
}
</style>
</head>
<body>
<div>
<p>Curabitur sapien diam, imperdiet ut est sed, blandit blandit velit. Nunc viverra nunc id ligula ultricies, a fringilla lacus interdum. <span>Sed vel diam at magna pellentesque porttitor.</span>
</p>
<h3>Demo</h3>
</div>
<p> Ut rutrum sapien sit amet sapien lacinia, at ullamcorper felis lobortis. Praesent dignissim vel turpis nec ultricies.</p>
</body>
</html>

出力結果

このコードを実行すると、次のような表示になります。

CSSセレクターで特定のクラス・属性・タイプを持たない要素を選択する方法（:not()疑似クラス活用）

上記の例では、div要素の中にあるp要素は青い背景（cornflowerblue）のままですが、divの外側にあるp要素には:not(div>p)によって黄色背景（khaki）・斜体・大きなフォントサイズが適用されていることがわかります。

例2：特定のクラスを持たない要素の選択

次の例では、.parentクラスを持たないdiv要素に対して、内側に影（inset box-shadow）を付けています。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: 2%;
    background-color: cadetblue;
    padding: 10%;
    height: 80px;
}
div:not(.parent) {
    box-shadow: inset 0 0 24px tomato;
    padding: 2%;
}
.parent{
    border: 4px ridge orange;
}
.one {
    background-color: lightgreen;
    border: 4px groove gray;
}
.two{
    height: 20px;
}
</style>
</head>
<body>
<div class="parent">
<div class="one">
<div class="two"></div>
<div class="two"></div>
</div>
<div class="one"></div>
</div>
</body>
</html>

出力結果

このコードを実行すると、次のような表示になります。

CSSセレクターで特定のクラス・属性・タイプを持たない要素を選択する方法（:not()疑似クラス活用）

:not(.parent)により、parentクラスを持つ外側のdiv要素は影なしのままですが、それ以外の子div要素すべてにトマト色の内側シャドウが適用されています。

まとめ

  • :not()疑似クラスは、指定したセレクターに一致しない要素を選択できる強力なツールです。
  • 引数には単純セレクターだけでなく、CSS Selectors Level 4以降では複雑なセレクターも指定可能です。
  • クラス名・属性・要素タイプなどを条件とした除外指定により、HTMLのマークアップを変更せずにスタイルを細かく制御できます。
  1. CSSの子孫セレクタとは？基本の書き方と実行例をわかりやすく解説

    CSSの子孫セレクタ（descendant selector）は、指定した要素の「内側にあるすべての子孫要素」にスタイルを適用するためのセレクタです。親要素と対象要素を半角スペースで区切って記述するのが特徴で、直下の子要素だけでなく、孫要素やそれ以降の階層にある要素もすべてマッチします。 子孫セレクタの基本的な書き方 構文は以下のように、親となるセレクタの後に半角スペースを空けて、対象となるセレクタを続けて記述します。 親セレクタ 対象セレクタ { プロパティ: 値; } たとえば div p と書けば、「div要素の中に存在するすべてのp要素」がスタイル適用の対象になります。divの直下

  2. CSSの要素タイプセレクターとは？基本構文と実例をわかりやすく解説

    CSSの要素タイプセレクターは、指定した種類の要素をすべて一括で選択するためのセレクターです。たとえば「li」と指定すれば、ページ内のすべてのリスト項目に同じスタイルが適用されます。HTML文書全体に共通のデザインを設定したい場合に非常に便利な、CSSの基本的なセレクターです。 構文 要素タイプセレクターの書き方は以下のとおりです。セレクター名として要素名をそのまま記述します。 element {    /*declarations*/ } サンプルコード1：リストとdiv要素への適用例 次の例では、li 要素と div 要素に対してそれぞれスタイルを指定しています。 &l