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

1 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 */
}

サポートブラウザは以下の通り。

ChromeEdgeSafariFirefoxiOS Safari
10810815.610812.5

https://caniuse.com/css-not-sel-list

このページをシェアする

関連タグ

関連記事

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

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

[CSS設計] ITCSSとは

TL;DR / CSS の問題 / ITCSS / 参考

[CSS設計] ITCSSをプロダクトに利用した所感

CSS の問題点 / CSS 設計 / ITCSS とは / ITCSS のメリット / おわり / 参考

Boolean型の変数に適した命名規則

背景 / プレフィックス / どのような条件なのか分かりやすくする / 否定形を避ける / 同じ意味の単語を避ける / プロジェクトの命名規則やコーディング規約に従う / Linter で矯正する

Googleが配信している日本語ウェブフォント一覧

はじめに(結論) / M+ 1p / Rounded M+ 1c / はんなり明朝 / こころ明朝 / さわらび明朝 / さわらびゴシック / ニクキュウ / ニコモジ / Noto Sans Japanese / まとめ

[CSS] 国内の主要サイトのfont-familyを調べてみた

日本の主要サイトとは / font-family 一覧 / 関連