CSSは後から記述したものが優先されますが、上書きではなく、無効化することは不可能なのでしょうか?
CakePHPというフレームワークを使って開発をしているのですが、フレームワーク標準のCSSファイルを直接修正せずに、上書き用のCSSファイルにて必要な箇所だけオーバーライドしているのですが、上書きはできても、無効化(定義がなかったことに)する方法がわかりません。
以下、無効化したい箇所の例です。
table tr:nth-child(2n) td {
background: #f5f5f5; /* これを無効化したい */
}
div.view {
float:right;
width:76%; /* これを無効化したい */
border-left:1px solid #666;
padding:10px 2%;
}
フレームワークのCSSファイルを直接編集し、定義を消す、もしくはコメントアウトする以外に、この定義を適用させない方法がありますでしょうか?
No.1ベストアンサー
- 回答日時:
>CSSは後から記述したものが優先されますが、
違います。カスケーディングのルールに従います。カスケーディングスタイルシートのもっとも根幹部分です。
すべてのスタイルをソートします。
重要度でソートされます。
ユーザーの重要宣言>著者の重要宣言>著者の宣言>ユーザーの宣言>デフォルトの宣言
詳細度が高いものから優先されます。
出所による宣言
最後に出現順位
よって詳細度を高くするか重要宣言で初期値を指定すれば良いです。
body div table tr:nth-child(2n) td {/* 詳細度0015 */
background: transparent none no-repeat 0% 0% 値 scroll ;/* 初期値 */
}
とか
table tr:nth-child(2n) td {/* 詳細度0014 */
background: transparent none no-repeat 0% 0% 値 scroll important! ;/* 初期値 */
}
6.4 カスケード処理(The cascade) ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
ありがとうございました。
カスケーディングのルールは理解していたのですが、
「無効化」という発想にとらわれていて、
「初期化」すればよいことに気が付きませんでした。
非常に助かりました。
No.2
- 回答日時:
補足です。
順番が問題になるのは、重要度・出所・詳細度が同じ指定が登場したときで、そのときにのみ、後で書かれたもので上書きされます。
スタイルシートの最後なんて大変なので、最初に書いて置いたら良いです。
そのとき、それぞれのプロパティには[初期値(Initial)]がありますから、その値を指定すると初期化されます。
'background-color'
Value: <color> | transparent | inherit
Initial: transparent
・・・・・・ transparentが初期値です。
★'background-color' ( http://www.w3.org/TR/CSS2/colors.html#propdef-ba … )
他のプロパティについても、同様に、Full property table ( http://www.w3.org/TR/CSS2/propidx.html )からプロパティを選択すると良いでしょう。
(注意)継承されるプロパティについては、既存のCSSに指定がなくても描かなければならない場合があります。継承れるかされないかは、常識の範囲内ですが必要ならそれぞれのプロパティのInherited:項目をチェックしてください。
上書き用のスタイルシートを用意するときも、詳細度や重要度を上げれば、同様です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript 画面に表示したらアニメーションを開始したい 3 2023/01/13 15:38
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS CSS上での計算を行うためのルールについて教えてください。 3 2022/08/15 14:43
- その他(IT・Webサービス) ホームページにカウント数を表示する 2 2022/10/28 10:37
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<th>タグを使っても太字にしな...
-
テーブルとテーブルの間隔について
-
TABLEのセルの中の文字を行単位...
-
table 幅固定で、端までいった...
-
テーブルデータを折り返して表...
-
table表を横に並べる際の間隔指定
-
親要素のwidthは子要素のwidth...
-
テーブルの高さを100%にしたけ...
-
CSSで特定のテーブルだけに...
-
同じ幅指定のつもりなのに、ブ...
-
HTML5で、テーブル内tdタグの高...
-
<fieldset>タグについて
-
html5のテーブル内でdivのタブ...
-
tableのcellpadding="0" cellsp...
-
正規表現で「より前」と「より後」
-
画面幅に合わせてテーブルのカ...
-
スタイルの無効化
-
<table>のclass指定が継承されない
-
tableタグでwidthとheightを100...
-
tableの位置がIEとその他ブラウ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
TABLEのセルの中の文字を行単位...
-
テーブルとテーブルの間隔について
-
<th>タグを使っても太字にしな...
-
CSSで特定のテーブルだけに...
-
table表を横に並べる際の間隔指定
-
HTML5で、テーブル内tdタグの高...
-
HTML tableのセルにtextareaを...
-
(HTML)Tableを任意の位置に置...
-
同じ幅指定のつもりなのに、ブ...
-
<fieldset>タグについて
-
画面幅に合わせてテーブルのカ...
-
tableを縦に続けるとtable間の...
-
html5のテーブル内でdivのタブ...
-
テーブル内のセル間にスペース...
-
ホームページのテキストを折り...
-
TR タグの表示・非表示を一括で...
-
tableの位置がIEとその他ブラウ...
-
textareaの外側の文字が下付き...
-
テーブルの高さを100%にしたけ...
-
ラインを端から端まで画面いっ...
おすすめ情報