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

CSS
この記事は約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(特定要素, 特定要素)」の方が良い気がします!
以上でした。

SNSフォローボタン
エンデ・バタローをフォローする
CSSサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

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

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

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

コメント

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