CSSを個別にキャンセル

ブログやWordpress(ワードプレス)、無料テーマ、無料のブログスタンドなど、使っているとデザインやレイアウトでどうしてもCSSを調整したい時が出て来ます。 ほとんどは、上書きしたりして対応ができるのですが、たま〜にどうしても対応出来ないクラスやIDが出てくる時が多々あります。 ググるといろいろと対応方法が出て来ますが、ブラウザによって動いたり、動かなかったり。 そんな中で一番簡単で動作環境が広い方法をご紹介。

CSSのクラスやIDを個別にキャンセルする方法

CSSを書いた経験があれば、方法は簡単。 もともと書いてあるクラスに以下の記述で、キャンセルしたい行をしていするだけです。
element:not(:nth-child(an + b)) { style properties }

サンプル

.hoge:not(:nth-child(3)) { color:#FF0000; line-height:1.4em; background:#666; font-size:16px; font-weight:700; } 上から3行目の「background:#666;」がキャンセルされます。 ↓↓↓ こういう状態ですね ↓↓↓ .hoge:not(:nth-child(3)) { color:#FF0000; line-height:1.4em; background:#666; font-size:16px; font-weight:700; } ※※ :not()で指定しないの意

セレクタの作例

tr:nth-child(2n+1)………HTML テーブルの奇数行

tr:nth-child(odd)………HTML テーブルの奇数行

tr:nth-child(2n)………HTML テーブルの偶数行

tr:nth-child(even)………HTML テーブルの偶数行

span:nth-child(0n+1)………親要素の先頭の子要素である span 要素。これは :first-child セレクタと同じです。

span:nth-child(1)………上と同じです。

span:nth-child(-n+3)………親要素の先頭から 3 つ目までの子要素のうちの 1 つ で、span であるものがマッチします。

CSSで奇数、偶数、最初、最後、n番目の要素にだけスタイルを設定する方法
参照:https://keikenchi.com/css-style-n
MDN 開発者向けのWeb技術
参照:https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child

ABOUTこの記事をかいた人

1998年からWEB関連の仕事に従事。角川グループのWEB会社に入社し、ディレクター、デザイナーとして経験を積む。2004年よりフリーランスとして活動し、2008年に法人を設立。サイトの制作だけでなく運用保守や紙媒体も行う。専門学校の非常勤講師も経験。