- ベストアンサー
CSS3の角丸設定とは？
- CSS3の角丸設定について質問しています。
- 質問文章では、サンプルサイトのCSSにおいて「>」を使った記述が初めて見られたことを指摘しています。
- また、「#global-nav」にある「ul」の「li」という意味のものであれば、角丸設定には「>」が必要ないと述べています。CSS3についての詳細を教えてほしいとしています。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
CSS1では、タイプセレクタ(要素のこと)、クラスセレクタ(class属性リストのひとつ)、子孫セレクタ(半角スペース)、:first-child疑似クラス、リンクの疑似クラスしかありませんでしが、CSS2.1では、全称セレクタ(*)、子供セレクタ(>),隣接セレクタ(+),属性セレクタ([]),動的な擬似クラスなどの擬似クラスや擬似要素が追加されています。 この子セレクタ(Child selectors)は、子孫ではなく、その要素の子供だけを選択するセレクタです。とても便利の良いセレクタで <body> <div class="header">★ </div> <div class="section">★ <div class="section"> <div class="section"> </div> </div> </div> <div class="footer">★ </div> </div> というHTMLであっても、 body>* 詳細度 0001 body>div 詳細度 0002 body>div.section 詳細度 0012 などの形で、★の要素だけに適用させることができます。 5. セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#q1 ) に一覧があります。(CSS2のものです。) 詳細度については、現行のCSS2.1と違いがあります。 →[CSS2]6.4.3 セレクタの詳細度を計算する（Calculating a selector's specificity） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html#specificity ) →[CSS2.1]6.4.3 Calculating a selector's specificity ( http://www.w3.org/TR/CSS2/cascade.html#specificity ) IE6やIE7の互換モードでは子供セレクタを理解しないことがあるので、子孫セレクタを書いて、詳細度の差により上書きする必要がある場合もあります。 body{clor:black;}詳細度 0001 body div{color:red;}詳細度 0002 body div div{color:black;}詳細度 0003 ↓[子セレクタを使うと] body{color:black;}詳細度 0001 body>div{color:red;}詳細度 0002
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.2です。ちょっと質問の趣旨と外れているようなので補足です。 ＞「#global-nav」にある「ul」の「li」という意味のものであれば、「>」 半角スペースは子孫セレクタ(Descendant selectors)で、子々孫々まで有効ですが >は(子供)セレクタ(Child selectors)で、直接の子供だけに有効です。 なぜ、 ＞記述を初めて見ました。 子供セレクタは、古いブラウザには理解しないものがあるので、わざわざ子孫セレクタを二度使う。と言うのが正しいのでしょうが、実際には>を知らなくて使われている場合が圧倒的に多いかと思います。 ＞この記述もCSS3からのものなのでしょうか？ CSS2で導入されました。 もうひとつ隣接セレクタ(Adjacent sibling selectors)もとても使い勝手の良いセレクタですが、同様にあまり見かけませんね。
- tracer
- ベストアンサー率41% (255/621)
<div id="contaienr"> <div> はげはげ </div> <div> <div>ほげほげ</div> </div> </div> 上記のHTMLだった場合、 div#container div{ color:red } としたら、「はげはげ」も「ほげほげ」も赤文字になります。 div#container>div{ color:red; } としたら、「はげはげ」だけが赤文字になります。 つまり、「>」は直属の子どもだけに指定する記述です。(孫以降には伝えない)
お礼
ご回答ありがとうございました。 簡潔なお答えでとても分かりやすかったです。
お礼
ご回答ありがとうございました。 二度にわたるご丁寧な回答、とても参考になりました。 CSS2からあったというのはびっくりでした。 自分が目にする機会がなかっただけのことなのですが… 重ね重ねありがとうございました！