人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSの適用の優先順位に関して質問です。

私の解釈としては
ID = 100点
class =10点
タグ =1点

とし、加点し最も点数が高いスタイルが適用される。
もしポイントが同点ならば下に記述されている方が優先される。

と解釈してました。

下記のCSSの場合、最もポイントが高いのは#wrap のところで、100点です。

#wrap { color:red;}
.lists li { color:green;}
li {color:blue;}


下記のHTMLの「あいうえお」は上記のどの部分も適用され得ますが、前述の通り、#wrapが適用され、赤にナと思っているのですが、IEでもFFでも、緑となってしまいます。

CSSの2行目の.list liを取り除いた場合はli の方が適用され、青になってしまいます。

「CSSの優先順」に関しては、ポイント形式よりも去らに前提となる条件があるのでしょうか??

どなたか教えてください。宜しくお願い致します。



<div id="wrap">
<ul class="lists">
<li>あいうえお</li>
</ul>
</div>


●質問者: ruijio
●カテゴリ:インターネット ウェブ制作
✍キーワード:Blue Class COLOR CSS GREEN
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● かずぼっくり
●60ポイント ベストアンサー

たとえば、

<div id="wrap">
<ul>
<li>あいうえお</li>
</ul>
</div>

というHTMLに

#wrap { color: red; }

というCSSを適用させると、ul要素・li要素にも同じCSSが適用されますが、なぜ子要素にまで適用されるかというと、ul要素・li要素が「継承」しているからです。


継承は、自身にCSS属性が指定されていない場合に行われます。

よって、

#wrap { color:red;}
.lists li { color:green;}
li {color:blue;}

というCSSであれば、すでにli要素にcolor属性が指定されているので、こちらが優先されて文字色が青になるのです。


なお、.lists liセレクタとliセレクタは同じliに対して適用しようとしていますが、どうしてliセレクタの方が優先されるのかはちょっと分かりませんでした。すみません。

◎質問者からの返答

ありがとうございます。

そうですね、仰るとおり継承の問題の気がします。

.lists li { color:green;}

li {color:blue;}

の場合ならば緑になるのは、11点と1点なので。11点の.lists li が勝ちということで理解できます。

すっきりしました。有難う御座いました。


2 ● QuestR2
●10ポイント

wrapとlistsでは、listsの方が内側にあるので、こちらが優先される

---

.lists li { color:green;}

li {color:blue;}

---

では、.lists li のほうがより細かい分類なので、こちらのほうが優先される

◎質問者からの返答

解答有難う御座います。

「内側にある」というのは、ちょっと適切でないかもしれません。

下記のソースを見ていただくと、下の方が内側で細かく記述してます。

しかしこの場合はIDが2つある上の設定の方が点数で上回るので、結果赤になります。

#top #wrap li{ color:red;}

div#wrap ul.lists li { color:blue;}

------------------------------------------

<body id="top">

</body>


3 ● suenaga3
●10ポイント

CSSの優先度は、より対象を限定できるものの方が優先されるのではないでしょうか?

1.同じidを持つタグは存在しないのでidは何よりも優先度が高い

2.「同名タグすべて」とclassでは、classの限定的なので優先度が高い

という感じで。

提示された例だと、idのあるタグの内側に、さらにタグがあります。

その場合、その内側のタグを連想させるものの方が、より限定的です。

「あいうえお」の親はだれかといわれたら、日本語で表現すると

「listsクラスのliタグ」といえると思います。

wrapというidを持っているのはさらにその親のタグなので、「あいうえお」を

限定する上ではulタグやliタグよりも弱いかなと思います。

お望みの結果を出したいだけならば、次のようにIDで対象を限定すれば

良いかと思います。

<ul class="lists">
 <li id="wrap">あいうえお</li>
</ul>

さらに言うならば、タグに直接スタイルを書き込むのが何より限定的な気がします。

◎質問者からの返答

こんばんわ、解答有難う御座います。

>CSSの優先度は、より対象を限定できるものの方が優先されるのではないでしょうか?

QuestR2さんへの返信のところで書きましたが、必ずしもそうではないと思います。

今回のケースではkazubokkuriさんの解答の通り、「継承」だと思います。

解答いただきまして有難う御座いました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ