CSSの否定疑似クラス:not()の使い方を紹介します。
:not()を利用するとコードがシンプルになることもあるので是非使い方をマスターしてください。
目次
CSSの:not()の対応ブラウザ
各種ブラウザがCSSの:not()をサポートしているかはこちらで確認できます。
現在では主要なブラウザ全てで対応しているので気兼ねなく利用できます。
CSSの:not()の使い方
:not()は、Selectors Level 3では「E:not(s)」と表記され、「sではないセレクタを持つE要素」という意味になります。
タグを除外する
IDがsample-01の要素の中にあるpタグ以外の要素の背景色を緑にします。
鹿目 まどか
暁美 ほむら
美樹 さやか
巴 マミ
佐倉 杏子
|
1 2 3 4 5 6 7 |
<div id="sample-01"> <div class="madohomu">鹿目 まどか</div> <div class="madohomu">暁美 ほむら</div> <p class="kyousaya">美樹 さやか</p> <div id="mami">巴 マミ</div> <p class="kyousaya">佐倉 杏子</p> </div> |
|
1 2 3 4 5 6 7 8 9 |
#sample-01 * { color: #fff; text-align: center; background-color: red; } #sample-01 :not(p) { background-color: green; } |
IDを除外する
IDがsample-02の要素の中にあるIDがmamiでない要素の背景色を青にします。
鹿目 まどか
暁美 ほむら
美樹 さやか
巴 マミ
佐倉 杏子
|
1 2 3 4 5 6 7 |
<div id="sample-02"> <div class="madohomu">鹿目 まどか</div> <div class="madohomu">暁美 ほむら</div> <div class="kyousaya">美樹 さやか</div> <div id="mami">巴 マミ</div> <div class="kyousaya">佐倉 杏子</div> </div> |
|
1 2 3 4 5 6 7 8 9 |
#sample-02 * { color: #fff; text-align: center; background-color: red; } #sample-02 :not(#mami) { background-color: blue; } |
クラスを除外する
IDがsample-03の要素の中にあるクラスがmadohomuでない要素の背景色を緑にします。
鹿目 まどか
暁美 ほむら
美樹 さやか
巴 マミ
佐倉 杏子
|
1 2 3 4 5 6 7 |
<div id="sample-03"> <div class="madohomu">鹿目 まどか</div> <div class="madohomu">暁美 ほむら</div> <div class="kyousaya">美樹 さやか</div> <div id="mami">巴 マミ</div> <div class="kyousaya">佐倉 杏子</div> </div> |
|
1 2 3 4 5 6 7 8 9 |
#sample-03 * { color: #fff; text-align: center; background-color: red; } #sample-03 :not(.madohomu) { background-color: green; } |
属性を除外する
IDがsample-04の要素の中にあるclass属性を持たない要素の背景色を青にします。
鹿目 まどか
暁美 ほむら
美樹 さやか
巴 マミ
佐倉 杏子
|
1 2 3 4 5 6 7 |
<div id="sample-04"> <div class="madohomu">鹿目 まどか</div> <div class="madohomu">暁美 ほむら</div> <div class="kyousaya">美樹 さやか</div> <div id="mami">巴 マミ</div> <div class="kyousaya">佐倉 杏子</div> </div> |
|
1 2 3 4 5 6 7 8 9 |
#sample-04 * { color: #fff; text-align: center; background-color: red; } #sample-04 :not([class]) { background-color: blue; } |
属性値を除外する
IDがsample-05の要素の中にあるclass属性がmadohomuでない要素の背景色を緑にします。
鹿目 まどか
暁美 ほむら
美樹 さやか
巴 マミ
佐倉 杏子
|
1 2 3 4 5 6 7 |
<div id="sample-05"> <div class="madohomu">鹿目 まどか</div> <div class="madohomu">暁美 ほむら</div> <div class="kyousaya">美樹 さやか</div> <div id="mami">巴 マミ</div> <div class="kyousaya">佐倉 杏子</div> </div> |
|
1 2 3 4 5 6 7 8 9 |
#sample-05 * { color: #fff; text-align: center; background-color: red; } #sample-05 :not([class="madohomu"]) { background-color: green; } |
マウスオーバー(:hover)を除外する
IDがsample-06の要素の中でマウスオーバーさせていない要素の背景色を青にします。
※マウスオーバーさせた要素が赤い背景色になります。
鹿目 まどか
暁美 ほむら
美樹 さやか
巴 マミ
佐倉 杏子
|
1 2 3 4 5 6 7 |
<div id="sample-06"> <div class="madohomu">鹿目 まどか</div> <div class="madohomu">暁美 ほむら</div> <div class="kyousaya">美樹 さやか</div> <div id="mami">巴 マミ</div> <div class="kyousaya">佐倉 杏子</div> </div> |
|
1 2 3 4 5 6 7 8 9 |
#sample-06 * { color: #fff; text-align: center; background-color: red; } #sample-06 :not(:hover) { background-color: blue; } |
以下のCSSと同じなのでこの場合はわざわざnotを使う必要がありません。
|
1 2 3 4 5 6 7 8 9 |
#sample-06 * { color: #fff; text-align: center; background-color: blue; } #sample-06 :hover { background-color: red; } |
最初の要素(:first-child)を除外する
IDがsample-07の要素の中で最初の要素でない要素の背景色を緑にします。
鹿目 まどか
暁美 ほむら
美樹 さやか
巴 マミ
佐倉 杏子
|
1 2 3 4 5 6 7 |
<div id="sample-07"> <div class="madohomu">鹿目 まどか</div> <div class="madohomu">暁美 ほむら</div> <div class="kyousaya">美樹 さやか</div> <div id="mami">巴 マミ</div> <div class="kyousaya">佐倉 杏子</div> </div> |
|
1 2 3 4 5 6 7 8 9 |
#sample-07 * { color: #fff; text-align: center; background-color: red; } #sample-07 :not(:first-child) { background-color: green; } |
最後の要素(:last-child)を除外する
IDがsample-08の要素の中で最後の要素でない要素の背景色を青にします。
鹿目 まどか
暁美 ほむら
美樹 さやか
巴 マミ
佐倉 杏子
|
1 2 3 4 5 6 7 |
<div id="sample-08"> <div class="madohomu">鹿目 まどか</div> <div class="madohomu">暁美 ほむら</div> <div class="kyousaya">美樹 さやか</div> <div id="mami">巴 マミ</div> <div class="kyousaya">佐倉 杏子</div> </div> |
|
1 2 3 4 5 6 7 8 9 |
#sample-08 * { color: #fff; text-align: center; background-color: red; } #sample-08 :not(:last-child) { background-color: blue; } |
N番目の要素(:nth-child)を除外する
IDがsample-09の要素の中で3番目の要素でない要素の背景色を緑にします。
鹿目 まどか
暁美 ほむら
美樹 さやか
巴 マミ
佐倉 杏子
|
1 2 3 4 5 6 7 |
<div id="sample-09"> <div class="madohomu">鹿目 まどか</div> <div class="madohomu">暁美 ほむら</div> <div class="kyousaya">美樹 さやか</div> <div id="mami">巴 マミ</div> <div class="kyousaya">佐倉 杏子</div> </div> |
|
1 2 3 4 5 6 7 8 9 |
#sample-09 * { color: #fff; text-align: center; background-color: red; } #sample-09 :not(:nth-child(3)) { background-color: green; } |
:not()で複数の条件を指定する
IDがsample-10の要素の中で最初と最後でない要素の背景色を緑にします。
鹿目 まどか
暁美 ほむら
美樹 さやか
巴 マミ
佐倉 杏子
|
1 2 3 4 5 6 7 |
<div id="sample-10"> <div class="madohomu">鹿目 まどか</div> <div class="madohomu">暁美 ほむら</div> <div class="kyousaya">美樹 さやか</div> <div id="mami">巴 マミ</div> <div class="kyousaya">佐倉 杏子</div> </div> |
|
1 2 3 4 5 6 7 8 9 |
#sample-10 * { color: #fff; text-align: center; background-color: red; } #sample-10 :not(:first-child):not(:last-child) { background-color: blue; } |
:not()をつなげていけばいくつでも条件を足していくことができます。
CSSの:not()の注意点
「E:not(s)」のsには単純なセレクタしか指定できません。
「 」「>」「+」などの結合子が入ると動作しないので注意してください。
次のコードは動作しません。
|
1 2 3 |
:not(li a) { color: red; } |
このような指定はCSS4から可能になる予定です。
上記のような場合はaタグにクラスを付与しておくなどして対処しましょう。
コメント
[…] CSS｜:not()の使い方まとめ！複数指定などサンプル10個 […]