【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サイト制作

埼玉県北本市に越してきて2年と少しになります。以前は東京都の京王線沿線に、その前は神戸の三宮、さらにその前は名古屋の八事霊園近くに住んでいました。

怖い話が大好きで、ネット怪談、ホラー小説、心霊Youtuber(オウマガドキch、ゾゾゾ)を寝る前のお供にしてます。

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

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

エンデ・バタローをフォローする
広告
初めてのブログ

コメント

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