:not()はCSSの疑似クラスの1つで、指定した要素以外にスタイルを適用する事ができ、否定疑似クラスとも言われています。他の疑似クラスとは使い方が特徴的で、使い方が分からないという方も多いのかなと思います。
今回は、そんな疑似クラス:not()の使い方と注意点について解説していきます。
否定疑似クラス:not()について
:not()は疑似クラスの1つで、指定した要素以外にスタイルを適用する事ができます。
指定した要素以外を対象とするため否定疑似クラスとも言われています。
否定疑似クラス:not()の使い方と使用例
:not()の使い方は以下のようになります。
div:not(.text) {
color: red;
}上記の場合は、クラス「text」がついていないdiv要素の文字色を赤にしています。
このように特定の要素を除いた要素にスタイルを適用する事が可能です。
その他にも、以下のような使い方が出来ます。
実際に私自身も使用しているやり方もありますので参考にしてみてください。
最後のli要素以外
これはよく使用する方法なのですが、指定要素の最後以外にスタイルを適用する方法です。
li:not(:last-child) {
border-bottom 1px solid #333;
}上記のようにする事で、li要素に下線を指定した後に最後の要素だけ下線を取り除くといった指定が不要となります。
否定疑似クラスの中に疑似クラスを入れ子にする事が可能です。
外部リンクを除く
a:not([target="_blank"]) {
text-decoration: underline;
}否定疑似クラスでは属性の値も指定出来ます。
上記の場合はa要素の外部リンクを除外してスタイルを適用しています。
複数の要素を除外する
div:not(.text1):not(.text2) {
background-color: #CCC;
}複数の要素を除外したい場合、「div:not(.text1, .text2)」のようにカンマ区切りにしてしまう方も多いかと思いますが、一部のブラウザでしか対応していない為、上記のように:not()の指定を複数繋げる方法を使用してください。
注意点
否定疑似クラス:not()を使用するにあたり注意する事がいくつかありますので下記にまとめています。
入れ子には出来ない
下記のように:not()の中に:not()を含める事はできません。
:not(:not(div)) {
～
}このように記述しても動作しませんのでご注意ください。
全称セレクタを使用出来ない
:not(*) {
～
}厳密に言うと全称セレクタ自体は使用出来ますが、上記のような指定では何も意味はありませんので注意いてください。
疑似要素には使用できない
他には、疑似要素にも使用できません。疑似用にはよく使用する「::before」や「::after」などがありますが、疑似要素について詳しく知りたい場合は、CSS疑似要素の::beforeと::afterの使い方と正しい書き方【CSS】をご覧ください。
:not(div::before) {
～
}さいごに
いかがでしたでしょうか。
今回は、否定疑似クラス:notの使い方と注意点について解説しました。
最初は使い方が分からなかったりするかと思いますが、便利な疑似クラスになりますので積極的に使用していけたらいいと思います。
