- ベストアンサー
CSSの>はどういう意味でしょう？
ttp://www.lucky-bag.com/archives/2005/04/footer.html 上のサイトで、以下の記述を見つけました。 >はどういう意味でしょうか？ body > #container { height: auto; }
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
子供セレクタです。 セレクタは基点となるセレクタから書き始めます。 div.section p と言う場合、divが基点になります。CSS2以降は基点となるセレクタ(タイプセレクタ)を書きます。 よく見かける .section は古い書き方で、CSS2ではこれは *.section の省略形とみなされます。*は全称セレクタですべてのタイプセレクタ(HTMLでいう要素-Element)を表します。*の詳細度は0です。 タイプセレクタは詳細度d=1です。 これに、様々なセレクタをつなげていきます。 div.section p{} と言う場合の、半角スペースは子孫セレクタと呼ばれるものでdiv要素の子々孫々を示しますから、<div class="section">に含まれるpに当てはまります。 >は、子供セレクタと言って、その直接の子孫--子供--だけに当てはまります。 <div class="section"> <p>あいうえお</p> <ol> <li><p>かきくけこ</p></li> で、 div.section p{color:red;} dic.section>p{font^weight:bold;} とすると、「あいうえお」も「かきくけこ」も赤字になりますが、太字になるのは「あいうえお」だけです。CSS2から導入されたセレクタです。 他にも、 + 兄弟セレクタ などがあります。これらは「つなげるセレクタ」と呼ばれ、詳細度に加算されませんから、いずれも詳細度は [0,0,0,2] になります。タイプセレクタはd=1です。 (半角スペース)子孫セレクタ > 子セレクタ + 隣接セレクタ [] 属性セレクタ--たくさんあります。 . クラスセレクタ # 一意セレクタ .abc classセレクタ 属性セレクタの[class~=abc]と同じ あと、リンクの擬似クラス、動的な擬似クラス、擬似要素を覚えておけば良いでしょう。 なお、 body > #container はおかしいです。そもそも#(一意セレクタ)はその文書中に一度しか登場しない、詳細度b=1と高いため、わざわざ>を使う必要はありません。知らないで書いているか、HTMLが間違っている(IDが複数回使われている)可能性があります。あとは、他のページではbodyの子供ではない使い方がされている場合、それには適用させたくないとかが考えられます。 これらセレクタや詳細度を含むカスケーディングの仕組みはCSSで最も重要な部分ですから、通常は最初に叩き込まれます。 詳しくは 5. セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html ) 6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html ) 直、詳細度の計算は現行のCSS2.1では訂正されています。 6.4.3 Calculating a selector's specificity ( http://www.w3.org/TR/CSS2/cascade.html#specificity ) ★最初にここらあたりを学んでおかないと、とてつもなく巨大なCSSを書く羽目になりますよ。
その他の回答 (1)
- t_ohta
- ベストアンサー率38% (5293/13829)
bodyタグの直下にあるIDがcontainerのタグにだけ適用するという意味です。 <body><div id="container">xxxxxxx</div>・・・・・ には適用されますが <body><section><div id="container">xxxxxxx</div>・・・・ だと適用されなくなります。
