質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.65%

特定の要素のスタイルシートを無効化して新たにスタイルを適用する方法を探しています

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 9,715

mido

score 11

ワードプレスでテーマをカスタマイズしています。
特定の要素だけデザインを変える必要があります。

その際、スタイルの継承を上書きすればスタイルが変更されることは分かっているのですが、かなりたくさんのプロパティがありややこしいです。

これを特定の要素だけリセットcssのようにスタイルをリセットして、改めて好きなスタイルを適用できる簡単な方法を探しています。

jqueryまたは、styleタグにscoped属性を付けることで解決できるものなのでしょうか?
知っている方がいましたらご教授下さい。

こんな感じはダメでしょうか?

<div class="example">
<style scoped>

  • { all: initial }
    @import url('newStyle.css');
    </style>
    <input type="example" value="送信">
    </div>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/08/02 16:53

    コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

    キャンセル

回答 3

checkベストアンサー

+1

本来であれば詳細度の高いセレクタで指定すれば上書きできるのですが、それをいちいち調べたくないということですよね?

リセットしたい要素にclass="reset"でもつけて、

.reset {
margin: 0!important;
padding: 0!important;
・・・略
}


って全部のプロパティをリセットしてやったものを書いておくのはどうでしょうか?

①reset.cssがあればreset.css
②テーマのCSS
③.reset{}
④自分のCSS
の順序で記述することになりますかね。

④は、

.reset.hoge {
margin:10px!important;
padding:20px!important;
}


のように。

しかしこんなことをするくらいなら「特定の要素」のセレクタを突き止めて修正したほうが早くてキレイ、あとで困らない、と思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/02 16:48

    継承されるプロパティが予測できないこともあり、やはり一旦全てリセットしてから、新たにスタイルを適用したいと考えています。

    キャンセル

+1

 CSS のカスケード処理、詳細度の計算

CSSではカスケード処理による上書きを基本としている為、定義したスタイルを消すことは出来ません。

 [JavaScript] document.styleSheets でセレクタ適用範囲を変更する

特定の要素に適用済の全スタイルを消す手順

  1. document.styleSheets で全てのスタイルをリストアップする
  2. リストアップしたセレクタを Element.prototype.matches で対象の要素に適用されるか確認し、適用されるなら 対象のセレクタを含まないセレクタの生成手順 の 1. へ移動し、そうでなければ 3. へ進む
  3. 次のスタイルを評価し、存在するなら 2. へ戻り、存在しなけれら終了する

対象のセレクタを含まないセレクタの生成手順

  1. 対象の要素を E とし、対象のセレクタを S1 とする
  2. S1 を元に対象の要素が適用されないセレクタ S2 を生成する
  3. document.querySelectorAll(S1) の評価値を ELEMENTS1 とし、document.querySelectorAll(S2) の評価値を ELEMENTS2 とする
  4. ELEMENTS1.length - ELEMENTS2.length === 1 が真であり、かつ差分となる要素が E1 であるなら 5. へ進み、そうでなければ 2. へ戻る
  5. 対象のセレクタを書き換え、特定の要素に適用済の全スタイルを消す手順 の 3. へ進む

ただし、この方法には次の制約があります。

  • 書き換えたセレクタの詳細度が変化した場合にカスケード処理に影響が出る

各セレクタの詳細度の差を大きくしてカスケード処理に影響が出ないようにする工夫が必要になります。

 [JavaScript] style属性でデフォルトスタイルシートに上書きする

  1. 対象の要素を E1 とし、document.cloneNode(true) の評価値を D とする
  2. E1 を参照可能ならセレクタ文字列を探し、SELECTOR とする
  3. D.querySelector(SELECTOR) の評価値を E2 とする
  4. D のドキュメント上から全てのstyle要素、link[rel=stylesheet] 要素を削除する
  5. D のドキュメント上に存在する全ての要素の style 属性を削除する
  6. E2 の computedStyle を参照し、STYLE とする
  7. E1.style に STYLE を適用する

この方法には次の制約があります。

  • 2. と 3. の STEP 間でDOMツリーに動的な変更が加えられた場合、E1 と E2 の同一性を保証できない可能性がある

setInterval で定期的にDOMに変更を加えるような実装でもなければ影響はないと思いますので、「document.styleSheets でセレクタ適用範囲を変更する」と比べれば影響範囲は小さいと思われます。

 まとめ

「スタイルを消す」というカスケードスタイルシート(CSS)と異なる概念を持ち込もうとしているので、どうやっても実装に無理が出てしまいます(完璧な手段はありません)。
普通に考えればCSSの仕様内でカスケード処理させるのが順当です。

やむを得ない事情があるという事ですので、十分に事前調査した上で副作用がある事を承知の上で実装することをお勧めします。
どちらの方法をとるにしても CSS と DOM について十分な深い知識が必要になります。

Re: mido さん

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/09 20:47

    スクリプトでやる方法の提案ありがとうございました。
    適用されているスタイルを取得して、初期化してから、適用ということになると思うのですが、もっと簡単にできるのでは?と思っていただけに、現実は複雑なのだと思い知らされました。

    キャンセル

0

特定の要素だけリセットcssのようにスタイルをリセットして

というのは難しいと思います。
デベロッパーツールでちまちま修正するのが保守の手間を含め結局低コストな気がします。

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回 詳説:デベロッパーツールの使い方:Google Chrome版Firebug:デベロッパーツール取扱説明書|gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/02 16:46

    諸事情があってダメなのです。
    リセットして、新たにスタイルを適用できる方法を探しています。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.65%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • HTMLに関する質問
  • 特定の要素のスタイルシートを無効化して新たにスタイルを適用する方法を探しています