CSS内で使われる山括弧の意味がわかりません。

質問

CSS内で山括弧が使われているのを発見しました。

#outer>#inner { border-bottom: 1px solid #fff; }

私はこのような表現をしたことがなく、「CSS 山括弧」と調べても答えが見つからなかったので質問させていただきました。

これはどのような意味なのでしょうか、とても初歩的な質問になってしまいますが……よろしくお願いします。

回答No.2

ORUKA1951 · ベストアンサー

>は「子セレクタ」または、『子供セレクタ』といい。直接の子孫です。
たとえば
<div>
　　<div>
　　　　<p>文章一</p>
　　</div>
　　<p>文章２</p>
</div>
の場合、子孫セレクタ[ ]の場合、
div p{プロパティA}
の場合、プロパティAは<p>文章1</p>にも<p>文章2</p>にも適用されますが、
子セレクタ
div>p{プロパティB}
の場合は、プロパティBは、<div>の直接の子供、<p>文章2</p>だけにしか適用されません。
　たくさんのセレクタ、隣接セレクタ・属性セレクタ・クラスセレクタ・・・と、詳細度は良く覚えておきましょう。
　それを覚えないと、やたらめったら<div>やclassの多い煩雑なHTMLやCSSになってしまいます。

お礼

とてもわかりやすい解説をどうもありがとうございます！
今までclassを大量に使用してページを作っていましたが、子セレクタというものがあるのですね…、これなら無駄にclassを追加する必要がなさそうです。

今後同じような失敗や勘違いをおこなさいようにセレクタに関して学んでおきます。どうもありがとうございました！

回答No.1

noname#108740

子供セレクタです。
http://hp.vector.co.jp/authors/VA022006/css/selector.html#child-selectors

お礼

分かりやすい解説のあるページを教えていただきありがとうございます。このページでしっかり学習させていただきますね！