【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年目。

前は東京都の京王線沿線に。
その前は神戸の三宮に。
その前は名古屋の八事霊園の近くに住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30代(男)です。

フロントエンドを始めて9年目になります。
最近は、ずっとwordpressをいじっており
エディタはVSCodeに乗り換え、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

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

コメント

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