![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
貰った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ランキング
-
フロートのクリアについて
-
liリストタグの背景色に色がつ...
-
CSSのクラス名・ID名の指定でワ...
-
外部スタイルシートで定義した...
-
子孫セレクタの読み方をおしえ...
-
CSSの足し算の意味は?
-
htmlのid属性って必要なの?
-
ようこそ と一文字ずついれる...
-
印刷曜CSSがどこかおかしい・・...
-
【VBA/HTML】IE画面内のページT...
-
brにクラスをつけてcssでdispla...
-
CSS内で使われる山括弧の意味が...
-
display:table-cell内でこんな...
-
CSSに同じclass名がいっぱい‥。...
-
div classを使ったcssでテキス...
-
個別にリンクの色を変える方法
-
CSS レスポンシブ縦画像で縦の...
-
DreamWeaverMX2004にて開始タグ...
-
idの中のid指定
-
name属性とid属性
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
個別にリンクの色を変える方法
-
CSSに同じclass名がいっぱい‥。...
-
HTML要素のid/class名の長さに...
-
idの中のid指定
-
最近、HTMLのヘッダーをIDで定...
-
サイトにjQueryが使用されてい...
-
liリストタグの背景色に色がつ...
-
CSSのホバーエフェクト
-
ページの左右の余白(枠外)に...
-
CSS, リンクの色を一部変えるに...
-
スタイルシートで、id属性の中...
-
htmlのid属性って必要なの?
-
透過背景を解除するにはどうす...
-
外部css定義したclassをht...
-
<span>で2重にかけているものを...
-
CSSのクラス名・ID名の指定でワ...
-
子孫セレクタの読み方をおしえ...
-
Bootstrap3でcontainerがずれる...
-
CSSが効かずどのように指定すれ...
-
brにクラスをつけてcssでdispla...
おすすめ情報