※本サイトにはプロモーションが含まれます。

CSS|:not()の使い方まとめ!複数指定などサンプル10個

CSS

CSSの否定疑似クラス:not()の使い方を紹介します。

:not()を利用するとコードがシンプルになることもあるので是非使い方をマスターしてください。

スポンサーリンク

CSSの:not()の対応ブラウザ

CSSの:not()対応ブラウザ

各種ブラウザがCSSの:not()をサポートしているかはこちらで確認できます。

現在では主要なブラウザ全てで対応しているので気兼ねなく利用できます。

CSSの:not()の使い方

:not()は、Selectors Level 3では「E:not(s)」と表記され、「sではないセレクタを持つE要素」という意味になります。

タグを除外する

IDがsample-01の要素の中にあるpタグ以外の要素の背景色を緑にします。

鹿目 まどか
暁美 ほむら

美樹 さやか

巴 マミ

佐倉 杏子

IDを除外する

IDがsample-02の要素の中にあるIDがmamiでない要素の背景色を青にします。

鹿目 まどか
暁美 ほむら
美樹 さやか
巴 マミ
佐倉 杏子

クラスを除外する

IDがsample-03の要素の中にあるクラスがmadohomuでない要素の背景色を緑にします。

鹿目 まどか
暁美 ほむら
美樹 さやか
巴 マミ
佐倉 杏子

属性を除外する

IDがsample-04の要素の中にあるclass属性を持たない要素の背景色を青にします。

鹿目 まどか
暁美 ほむら
美樹 さやか
巴 マミ
佐倉 杏子

属性値を除外する

IDがsample-05の要素の中にあるclass属性がmadohomuでない要素の背景色を緑にします。

鹿目 まどか
暁美 ほむら
美樹 さやか
巴 マミ
佐倉 杏子

マウスオーバー(:hover)を除外する

IDがsample-06の要素の中でマウスオーバーさせていない要素の背景色を青にします。

※マウスオーバーさせた要素が赤い背景色になります。

鹿目 まどか
暁美 ほむら
美樹 さやか
巴 マミ
佐倉 杏子

以下のCSSと同じなのでこの場合はわざわざnotを使う必要がありません。

最初の要素(:first-child)を除外する

IDがsample-07の要素の中で最初の要素でない要素の背景色を緑にします。

鹿目 まどか
暁美 ほむら
美樹 さやか
巴 マミ
佐倉 杏子

最後の要素(:last-child)を除外する

IDがsample-08の要素の中で最後の要素でない要素の背景色を青にします。

鹿目 まどか
暁美 ほむら
美樹 さやか
巴 マミ
佐倉 杏子

N番目の要素(:nth-child)を除外する

IDがsample-09の要素の中で3番目の要素でない要素の背景色を緑にします。

鹿目 まどか
暁美 ほむら
美樹 さやか
巴 マミ
佐倉 杏子

:not()で複数の条件を指定する

IDがsample-10の要素の中で最初と最後でない要素の背景色を緑にします。

鹿目 まどか
暁美 ほむら
美樹 さやか
巴 マミ
佐倉 杏子

:not()をつなげていけばいくつでも条件を足していくことができます。

CSSの:not()の注意点

「E:not(s)」のsには単純なセレクタしか指定できません。

「 」「>」「+」などの結合子が入ると動作しないので注意してください。

次のコードは動作しません。

このような指定はCSS4から可能になる予定です。

上記のような場合はaタグにクラスを付与しておくなどして対処しましょう。

スポンサーリンク

フォローする

コメント

  1. […] CSS|:not()の使い方まとめ!複数指定などサンプル10個 […]