特定の要素のみCSSを指定したくない

2016/04/26

状況

まずは「どういう状況から何をしたのか?」ってヤツ。

  • サイトはすでにあり、すべてのページで「A.css」を読み込ませている。
  • そのサイトの「zebra.html」のみ「A.css」と「B.css」を読み込ませたい。

次に「何が起きたのか?」ってことと「その原因は?」の2つ。

  • 「.hoge」という記述が「A.css」と「B.css」の両方にある。
  • 「A.css」と「B.css」の「.hoge」が合体した状態で「zebra.html」に適用された。

最後に「どうなればいいのか?」ってこと。

  • 「zebra.html」では、「B.css」の「.hoge」のみ適用させたい。

対策案

対策案はいくつかある。

  1. 諦める
  2. 「zebra.html」のみ「A.css」を読み込まない or 別途CSSを用意する
  3. 「A.css」の「.hoge」を「.hogehoge」に書き換える
  4. 「B.css」の「.hoge」を「.hogehoge」に書き換える
  5. 別案を考える

とりあえず、ひとつずつ考えていこう。

対策案1:諦める

考えるまでもなく、諦めるわけにはいかない。

対策案2:読み込ませるCSSの制御

まず「A.css」を読み込まないって方法が考えられるが「A.css」には「.hoge」以外の記述が多々あるわけなので「読み込まない」という案は却下。

次に「A.css」から「.hoge」以外の記述を書き出して「A2.css」を用意して「zebra.html」のみ「A2.css」「B.css」を読み込ませるって方法。

現実的な気はするけど、「.hoge」以外の記述部分を修正・追加するたびに「A.css」と「A2.css」を修正する必要が出てくる。

単純に「面倒だからヤだ」ってのもあるけど、それ以上にミスが増える率が高くなるので避けたい。
「A.css」を修正したけど「A2.css」の修正を忘れていた・・・ってのが多くなりそう。
あとはコピー&ペーストした際に「関係ない行まで選択していた」や「関係ある行すべてを選択していなかった」などだったり。

ということで、この案は避けたい。

対策案3:A.cssの修正

「A.css」の「.hoge」を「.hogehoge」に書き換えれば解決なんだけど、これをやっちゃうと全てのページから「.hoge」を設定している箇所を探し出して「.hogehoge」に書き換える必要がでてくる。

ページ数の都合上、全力で避けたい。

対策案4:B.cssの修正

「B.css」の「.hoge」を「.hogehoge」に書き換えれば解決なんだけど、「B.css」の修正は禁じ手とされている。

対策案5:別案

「A.css」の「.hoge」に別途、条件をつける。

まずは現状の確認。

  • 「B.css」の修正は禁じ手
  • 全てのページを修正する気はない

この現状から出来るコトは下記。

  • 「A.css」の修正
  • 「zebra.html」の修正

この2つから考えてみるコトにした。

結果

「A.css」と「zebra.html」の修正が可能なので、「特定の条件のみ適用しない」っていう記述にする。

説明しづらいので、まずは現状の記述。

▼A.css
.hoge{
   ○○○
}

▼zebra.html
<p class=”hoge”>○○○○○</p>

「特定の条件のみ適用しない」ってのは下記のような感じ。

▼A.css
.hoge:not(.notClass){
   ○○○
}

▼zebra.html
<p class=”hoge notClass”>○○○○○</p>

これで「class=”hoge”」は適用するけど「class=”hoge notClass”」は適用しないっていう記述になる。

結果

  • 「A.css」で「class=”hoge notClass”」としているので「A.cssの.hoge」は適用されない
  • 「B.css」の「.hoge」は適用される

新着(ニュース関連以外)

2017-12-13
jqueryで取得したDOM要素をオブジェクトじゃなくて、配列で受け取りたい
2017-11-30
Xampp+FuelPHP1.8をサーバーにupしたらエラーになった。
2017-11-09
PCでプッシュ通知ってのをしたい。
2017-11-06
PHPのバージョンを上げたらwikiが壊れたっぽい。
2017-08-03
formのinputでmaxlengthを使うとFirefoxでバグってた。他のブラウザでも気づかずにバグってたかもしれない。