
貰ったCSSファイルがありますが、同じclass名が無数にあります。
.abc {
*****:+++;
}
.def .abc {
*****:+++;
*****:+++;
}
.abc {
*****:+++;
}
こんな感じで、同じclassが10以上ある時もあります。
これらを触りたい時、一体どれを触れば正しく反映されるのかお教え頂けませんでしょうか。
(一番最後のが反映される、など)
また、同じclassはひとつにまとめた方が管理上便利かと思うのですが、そうでもないのでしょうか。
どうぞ宜しくお願い致します。
No.2ベストアンサー
- 回答日時:
整理はされた方が管理が楽です。
自分ルールはやっているうちになんとなく出来ていくみたいですが。1さんの言うように、正確には仕様書が一番なのですが、とっつき悪いのでなんとなくわかったような気になるページを紹介しますね。
http://www.stylish-style.com/csstec/base/order.h …
簡単にいうとポイント制で得点の高い値が表示されます。誤解を恐れずにいうと限定されればされるほどポイントが高くなるような配点になっているようです。全称セレクタより部分、部分の中のclassよりidの方が限定される。って具合。で、同じ得点なら後ろが反映されるって具合です。
これまた分かりやすく重宝しそうです。確かに分かった気になれそうです(^^;
しばらくはICHI-yan様のこのサイトを参考に、着実に習得していければと思います。
ありがとうございました!
No.1
- 回答日時:
6.4.1 Cascading order
カスケードの順序
該当するmedia typeに適用されるプロパティを
優先度高
!importantが書かれているユーザースタイルシート
!importantが書かれているページ製作者スタイルシート
!importantが書かれていないページ製作者スタイルシート
!importantが書かれていないユーザースタイルシート
ブラウザ等のユーザーエージェントのスタイルシート
優先度低
プロパティの値は以下の順で優先度が決められる
http://www.w3.org/TR/CSS21/cascade.html#specific …
●style属性によって指定されている宣言にはaを1、指定されていないものはaを0とする。
●セレクタ中に含まれるIDセレクタ(#)の数を数え、bとする。
●セレクタ中に含まれるIDセレクタ(#)以外の属性および擬似クラスの数を数え、cとする
●セレクタ中に含まれる要素名および擬似要素の数を数え、dとする
p[id=p33]のような指定のものはたとえ使われているのがDTD上でID型の属性として定義されていたとしてもcに含める。
a>b>c>d の順で優先される(aが同じならbが大きい方が優先,aもbも同じならcが大きい方が優先・・・・)
したがって、上記URL中のソースではP要素の背景は緑色になる
●優先度が同じになってしまった宣言については後に書かれた宣言が優先される
●@importで読み込まれたスタイルシートファイルについては,そのファイル中の宣言は,読み込み元のスタイルシートのすべての宣言の前に書かれているものとして扱われる。
=======
以上,W3C CSS 2.1
6.4 The cascade
6.4.1 Cascading order
6.4.2 !important rules
6.4.3 Calculating a selector's specificity
を私訳
もの凄く丁寧にご回答頂き、ありがとうございます。
今CSSを猛勉強中なので、ぜひ参考にさせて頂ければと思います。
本当にありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP アップロードファイルの数に応じてCSSを動的に変更したいのですが、方法がわかりません 3 2023/07/23 21:59
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
- JavaScript htmlとcssに関する質問です 3 2022/12/06 05:36
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- HTML・CSS 分数が正常に表示されない。 6 2022/05/09 18:53
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlのid属性って必要なの?
-
p要素にclassとspanでclass適応...
-
特定の見出しのみ前後の空白を...
-
<p>と<p>と<p>の三つの使い方な...
-
divタグについて
-
<span>で2重にかけているものを...
-
CSSのクラス名・ID名の指定でワ...
-
inputタグのテキストBOXだけ右...
-
cssの見栄えをタブで整えないの...
-
リンク文字の 一部だけ色を変...
-
liリストタグの背景色に色がつ...
-
CSS内で使われる山括弧の意味が...
-
brにクラスをつけてcssでdispla...
-
HTML要素のid/class名の長さに...
-
個別にリンクの色を変える方法
-
idの中のid指定
-
display:table-cell内でこんな...
-
htmlの文字が縦書きになる
-
テンソル解析(絶対微分学)は...
-
ボタンをセル内一杯に表示させ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
個別にリンクの色を変える方法
-
idの中のid指定
-
サイトにjQueryが使用されてい...
-
liリストタグの背景色に色がつ...
-
brにクラスをつけてcssでdispla...
-
HTML要素のid/class名の長さに...
-
inputタグのテキストBOXだけ右...
-
リンク文字の 一部だけ色を変...
-
CSSのクラス名・ID名の指定でワ...
-
特定の見出しのみ前後の空白を...
-
同ページ内でリンクの色を変え...
-
スタイルシートで、id属性の中...
-
[HTML] selectの線を非表示に...
-
CSSの適用を一部だけ除外したい。
-
HP作成(ワッパーを中心に)
-
<span>で2重にかけているものを...
-
オンマウス時の背景色を個別に...
-
Bootstrap 訪問済みテキストリ...
-
最近、HTMLのヘッダーをIDで定...
-
子孫セレクタの読み方をおしえ...
おすすめ情報