CSSを個別にキャンセル

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