[CSS] :not()セレクタを複数指定する方法

2 min read

状況

以下のようなページネーションがある。

<ul class="pagination">
  <li class="first"></li>
  <li class="previous"></li>
  <li>01</li>
  <li>02</li>
  <li>03</li>
  <li class="active"></li>
  <li></li>
  <li class="last"></li>
</ul>

first previous active last以外の要素にスタイルを適応したい。こういう場合、:not()セレクタを使って指定を除外するが、複数指定する場合も同様に:not()セレクタを使う。

使用方法

Selectors Level 3 では、:not(.first, previous)ように続けて指定できない。
以下のように:not()を繋げて指定する必要がある。

&:not(.first):not(.next):not(.previous):not(.last):not(.active) {
  /* style */
}

Selectors Level 4 では、リスト形式を入れ込むことが出来る。

&:not(.first, .next, .previous, .last, .active) {
  /* style */
}

https://drafts.csswg.org/selectors/#negation

Next Read

CSS in JSとは何か

想定読者 / そもそも JS フレームワーク(React、Vue.js)を採用する理由とは何か / 「命令的 UI」 と 「宣言的 UI」 / 「命令的 UI」 VS 「宣言的 UI」 / CSS in JS とは / CSS in JS ライブラリ / Emotion の使い方 / 利用するメリット / 利用するデメリット / 関連 / <h2 id="footnote-label" class="sr-only">Footnotes

[CSS] カスケードレイヤー(@layer)とITCSSの概念を組み合わせた設計を考える

カスケードレイヤーとは / ITCSS のレイヤー / ITCSS のレイヤーをカスケードレイヤーに落とし込む / 参考

[CSS in JS] 外部のリセットCSSを使う方法

目的 / 課題 / おまけ

CSSのborder-radiusではiOSのアイコンの角丸は表現できない

ウェブフロントエンドの CSS で再現する方法 / 参考