スリ飯屋Malankaのフリーエンジニアな日々

IT実務未経験から約1年、東京でフリーランスのRuby on Railsエンジニアに転職。約2年半、大阪中崎町でスリランカカレーの間借りしてました。フリーランスエンジニアになるためのノウハウ、スリランカの事を発信していきます。

【css】特定のセレクタに対しては、cssを適用しない :not

css】特定のセレクタに対しては、cssを適用しない :not

:not(セレクタ名) と書きます。

例: tbody要素内の、#article_speech_targetというセレクタ以外のtdに対し、cssを適用したい。

以下のようになります。

tbody td:not(#article_speech_target) {
  padding: 1em 10px 1em 1em;
}

特定要素内の、一部の要素だけcss適用除外にしたい

&(アンパサンド)と:notを使います。

&は親セレクタ名(今回の例ではtd)に変換されます。

&と:notを組み合わせると、以下のようになります。

1、 tbody要素内の、tdタグ全てにtext-align: center;を適用

2、 ただし、#article_speech_targetというセレクタに対してはpadding: 1em 10px 1em 1em;を適用しない

tbody td {
  text-align: center;

  // #article_speech_targetに対してはpaddingを適用しない
  &:not(#article_speech_target) {
    padding: 1em 10px 1em 1em;
  }
}

以上です。

  • 参考

:not() - CSS: カスケーディングスタイルシート | MDN

[SCSS]便利な&(アンパサンド)の使い方メモ - Qiita

Sassの便利機能:親セレクタの参照&(アンパサンド)について | UX MILK