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>

回答の条件
  • 1人2回まで
  • 登録:2009/05/24 18:48:23
  • 終了:2009/05/24 23:51:36

ベストアンサー

id:kazubokkuri No.1

かずぼっくり回答回数92ベストアンサー獲得回数82009/05/24 19:16:45

ポイント60pt

たとえば、

<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セレクタの方が優先されるのかはちょっと分かりませんでした。すみません。

id:ruijio

ありがとうございます。

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

.lists li { color:green;}

li {color:blue;}

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

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

2009/05/24 23:01:51

その他の回答(2件)

id:kazubokkuri No.1

かずぼっくり回答回数92ベストアンサー獲得回数82009/05/24 19:16:45ここでベストアンサー

ポイント60pt

たとえば、

<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セレクタの方が優先されるのかはちょっと分かりませんでした。すみません。

id:ruijio

ありがとうございます。

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

.lists li { color:green;}

li {color:blue;}

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

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

2009/05/24 23:01:51
id:QuestR2 No.2

QuestR2回答回数435ベストアンサー獲得回数132009/05/24 19:35:17

ポイント10pt

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

---

.lists li { color:green;}

li {color:blue;}

---

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

id:ruijio

解答有難う御座います。

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

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

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

#top #wrap li{ color:red;}

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

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

<body id="top">

  • あいうえお

</body>

2009/05/24 23:07:05
id:suenaga3 No.3

suenaga3回答回数19ベストアンサー獲得回数52009/05/24 22:08:16

ポイント10pt

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

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

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

という感じで。

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

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

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

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

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

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

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

良いかと思います。

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

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

id:ruijio

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

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

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

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

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

2009/05/24 23:37:46
  • id:haruo-31
    ポイント形式!?誰かに教わったのですか?
  • id:ruijio
    haruo-31さん、
    うろ覚えですが、以前Web2.0の有名なデザイナーの方の資料にこのように書いてあったと記憶してます。

    ただ、ポイント制について再度検証してみました。

    #a li{ color:red;}
    .b .c .d .e .f .g .h .i .j .k ul li {color:blue;}
    ---------------------------------------------------
    <div id="a">
    <div class="b"><div class="c"><div class="d"><div class="e"><div class="f"><div class="g"><div class="h"><div class="i"><div class="j"><div class="k">
    <ul class="lists">
    <li>あいうえお</li>
    </ul>
    </div>
    </div></div></div></div></div></div></div></div></div></div>

    前述のポイント制が正しければ、#a li は101点、後者は102点で青になるはずが、101点の赤が勝ってしまいます。

    クラスなどを10個もネストするようなシーンはあまりないのでポイント制の解釈でもいいと思いますが、オリンピックの各国の順位のような解釈が正しいのでしょう。

    ※金0 銀10 銅100 の国よりも金1 銀0 銅0 の国の方が順位が上という考え方。

  • id:haruo-31
    うぇぇ!?と思って調べてみました。確かに最後に得点式で評価されるようですね。
    上の回答で書かれているように基本は親要素からスタイルを継承しますが、子要素に別途スタイルが指定される場合、それが最優先となります。しかし同じ要素に複数のスタイルが定義されるようなシチュエーションの場合、要素の指定方法により、優先順位判断が起こります。(W3Cの仕様ページより)

    * {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
    li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
    li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
    ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
    ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
    h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
    ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
    li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
    #x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
    style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

    優先順位の高さはa>b>c>dで判断され、同レベルであれば数値が高い方が優先されます。

    #test {color: red}
    ul li {color: green}
    li {color: blue}

    <ul id="test">
    <li>ababa
    <li class="color: yellow">hogehoge
    </ul>

    testはULに掛かっているスタイルなので無視され、"ababa"は緑に、"hogehoge"は黄色になります。
    ちなみに ul liとli:first-lineをFFで試したところ、first-lineの方が優先されました。
  • id:Mars
    ポイント制 → 狭義では一般的に「詳細度」と訳されてるようですね。検索する際の参考に。(ちと古い文献にあたってしまう可能性も高くなるかもしれないけど・・英語力のない私は助かってます。)


    >testはULに掛かっているスタイルなので無視され
    ちょっとした言葉のチョイスのミスでしょうけど、無視ではなく継承により設定された値に上書きされた、って考えるんでしょうね。
    今回に質問はまさに継承にあたる指定を詳細度計算に組み入れてしてしまったがために出てきた事なんでちょっとひっかかりました。
    カスケード処理とかを考えると、無視されるって考えだと罠に陥りそうなんで。

    例えば次のようにfontの指定を足すと、無視ではなく上書きされてる事を実感できると思います。
    #test {color:red; font:bold large serif;}
    ul li {color: green;font-family:sans-serif;}

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません