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

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

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

1 CSSの:not()の対応ブラウザ
2 CSSの:not()の使い方
3 CSSの:not()の注意点

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

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

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

CSSの:not()の使い方

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

タグを除外する

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

鹿目まどか

暁美ほむら

美樹さやか

巴マミ

佐倉杏子

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

<div class="madohomu">鹿目まどか</div>

<div class="madohomu">暁美ほむら</div>

<p class="kyousaya">美樹さやか</p>

</div>

#sample-01 * {
  color: #fff;
  text-align: center;
  background-color: red;
}

#sample-01 :not(p) {
  background-color: green;
}

#sample-01 * {

color: #fff;

text-align: center;

background-color: red;

}

#sample-01 :not(p) {

background-color: green;

}

IDを除外する

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

鹿目まどか

暁美ほむら

美樹さやか

巴マミ

佐倉杏子

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

<div class="madohomu">鹿目まどか</div>

<div class="madohomu">暁美ほむら</div>

<div class="kyousaya">美樹さやか</div>

</div>

#sample-02 * {
  color: #fff;
  text-align: center;
  background-color: red;
}

#sample-02 :not(#mami) {
  background-color: blue;
}

#sample-02 * {

color: #fff;

text-align: center;

background-color: red;

}

#sample-02 :not(#mami) {

background-color: blue;

}

クラスを除外する

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

鹿目まどか

暁美ほむら

美樹さやか

巴マミ

佐倉杏子

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

<div class="madohomu">鹿目まどか</div>

<div class="madohomu">暁美ほむら</div>

<div class="kyousaya">美樹さやか</div>

</div>

#sample-03 * {
  color: #fff;
  text-align: center;
  background-color: red;
}

#sample-03 :not(.madohomu) {
  background-color: green;
}

#sample-03 * {

color: #fff;

text-align: center;

background-color: red;

}

#sample-03 :not(.madohomu) {

background-color: green;

}

属性を除外する

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

鹿目まどか

暁美ほむら

美樹さやか

巴マミ

佐倉杏子

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

<div class="madohomu">鹿目まどか</div>

<div class="madohomu">暁美ほむら</div>

<div class="kyousaya">美樹さやか</div>

</div>

#sample-04 * {
  color: #fff;
  text-align: center;
  background-color: red;
}

#sample-04 :not([class]) {
  background-color: blue;
}

#sample-04 * {

color: #fff;

text-align: center;

background-color: red;

}

#sample-04 :not([class]) {

background-color: blue;

}

属性値を除外する

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

鹿目まどか

暁美ほむら

美樹さやか

巴マミ

佐倉杏子

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

<div class="madohomu">鹿目まどか</div>

<div class="madohomu">暁美ほむら</div>

<div class="kyousaya">美樹さやか</div>

</div>

#sample-05 * {
  color: #fff;
  text-align: center;
  background-color: red;
}

#sample-05 :not([class="madohomu"]) {
  background-color: green;
}

#sample-05 * {

color: #fff;

text-align: center;

background-color: red;

}

#sample-05 :not([class="madohomu"]) {

background-color: green;

}

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

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

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

鹿目まどか

暁美ほむら

美樹さやか

巴マミ

佐倉杏子

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

<div class="madohomu">鹿目まどか</div>

<div class="madohomu">暁美ほむら</div>

<div class="kyousaya">美樹さやか</div>

</div>

#sample-06 * {
  color: #fff;
  text-align: center;
  background-color: red;
}

#sample-06 :not(:hover) {
  background-color: blue;
}

#sample-06 * {

color: #fff;

text-align: center;

background-color: red;

}

#sample-06 :not(:hover) {

background-color: blue;

}

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

#sample-06 * {
  color: #fff;
  text-align: center;
  background-color: blue;
}

#sample-06 :hover {
  background-color: red;
}

#sample-06 * {

color: #fff;

text-align: center;

background-color: blue;

}

#sample-06 :hover {

background-color: red;

}

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

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

鹿目まどか

暁美ほむら

美樹さやか

巴マミ

佐倉杏子

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

<div class="madohomu">鹿目まどか</div>

<div class="madohomu">暁美ほむら</div>

<div class="kyousaya">美樹さやか</div>

</div>

#sample-07 * {
  color: #fff;
  text-align: center;
  background-color: red;
}

#sample-07 :not(:first-child) {
  background-color: green;
}

#sample-07 * {

color: #fff;

text-align: center;

background-color: red;

}

#sample-07 :not(:first-child) {

background-color: green;

}

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

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

鹿目まどか

暁美ほむら

美樹さやか

巴マミ

佐倉杏子

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

<div class="madohomu">鹿目まどか</div>

<div class="madohomu">暁美ほむら</div>

<div class="kyousaya">美樹さやか</div>

</div>

#sample-08 * {
  color: #fff;
  text-align: center;
  background-color: red;
}

#sample-08 :not(:last-child) {
  background-color: blue;
}

#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番目の要素でない要素の背景色を緑にします。

鹿目まどか

暁美ほむら

美樹さやか

巴マミ

佐倉杏子

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

<div class="madohomu">鹿目まどか</div>

<div class="madohomu">暁美ほむら</div>

<div class="kyousaya">美樹さやか</div>

</div>

#sample-09 * {
  color: #fff;
  text-align: center;
  background-color: red;
}

#sample-09 :not(:nth-child(3)) {
  background-color: green;
}

#sample-09 * {

color: #fff;

text-align: center;

background-color: red;

}

#sample-09 :not(:nth-child(3)) {

background-color: green;

}

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

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

鹿目まどか

暁美ほむら

美樹さやか

巴マミ

佐倉杏子

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

<div class="madohomu">鹿目まどか</div>

<div class="madohomu">暁美ほむら</div>

<div class="kyousaya">美樹さやか</div>

</div>

#sample-10 * {
  color: #fff;
  text-align: center;
  background-color: red;
}

#sample-10 :not(:first-child):not(:last-child) {
  background-color: blue;
}