【CSS】:notで複数の要素を指定する方法

この記事は約2分で読めます。

CSSでスタイリングしていると、「最初の要素以外」とか「特定class以外」にスタイルを当てたい時がある。
そんな時に使うのが疑似要素の「:not」です。
例えばリストの最初の要素以外を指定する時は「li:not(:first-child) {}」と書き、特定の要素以外を指定する時は、「div:not(.tokutei) {}」と指定すればイケます。
さらにこの「:not」を使って「複数の要素以外」を指定する場合は以下の通りです。

CSS

// リストの最初と最後以外を指定する
li:not(:first-child, :last-child) {}

// [.tokutei1]と[.tokutei2]以外を指定する
div:not(.tokutei1, .tokutei2) {}

// リストの2番目と特定要素以外を指定する
li:not(:nth-of-type(2), .tokutei1) {}

疑似要素「:not」の中にさらに疑似要素「:first-child」はちょっと違和感がある気がするけど
こう書くのが正解みたいです。
他にもちょっと変だけどこんな書き方でも特定要素以外を指定できる。

CSS

// リストの最初と最後以外を指定する
li:not(:first-child):not(:last-child) {}

// [.tokutei1]と[.tokutei2]以外を指定する
div:not(.tokutei1):not(.tokutei2) {}

// リストの2番目と特定要素以外を指定する
li:not(:nth-of-type(2)):not(.tokutei1) {}

この書き方でも同じ意味になるみたい。
変な書き方な気がするから、僕は最初に挙げた「:not(特定要素, 特定要素)」の方が良い気がします!
以上でした。

CSSサイト制作
エンデ・バタロー

フロントエンドエンジニアとして10年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、今は亡きXHTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

制作のご依頼やお問い合わせはこちらから連絡お願いします。

エンデ・バタローをフォローする
シェアする
初めてのブログ

コメント

タイトルとURLをコピーしました