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

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

目次

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

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

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

HTML

<div class="container">
    <div class="box1">
        sample text
    </div>
    <div class="box2">
        sample text
    </div>
    <div class="box3">
        sample text
    </div>
</div>

CSS

.container > div:not(.box1):not(.box3) {
    color: red;
}

まとめ

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

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

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

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents