CSS3: 擬似クラス not で複数要素を指定する

今回は CSS でスタイルを効かせたくない要素が指定できる擬似クラス、not を複数指定する方法をメモしておきます。

目次

• 擬似クラス not で複数要素を指定する
• まとめ

擬似クラス not で複数要素を指定する

下記 HTML で、box1, box3 クラスに対してフォントカラー赤の指定を除外します。

HTML

[code]

[/code]

CSS

[code]
.container > div:not(.box1):not(.box3) {
color: red;
}
[/code]

まとめ

参考までに、擬似要素、擬似クラスの違いもメモしておきます。

::before, ::after, ::first-letter, ::first-line, ::selection は要素の一部に影響を与えるため、擬似要素となります。
それ以外の :link, :visited, :hover, :active, :first-child… は要素全体に影響を与えるため、擬似クラスとなります。
擬似要素はコロン2つ、擬似クラスはコロン1つから始まるので、記述を間違えないようにしましょう。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。