E > F
E要素の直接の子である F要素に対してスタイルが適用されます。2つの要素の親子関係を大なり記号( U+003E、> )で表します。
- div > p
- div 要素の子である p 要素を表しています。
- div ol>li a
- div 要素 の子孫である ol 要素 の子の li 要素 の子孫の a 要素 を表しています。(" > " 結合子の前後の空白は省略。)
example
div > p { background-color: pink; } div ol>li a { background-color: skyblue; }
source
<div> <p> div > p </p> <div> <p> div と p の間にもう一つ div があるのでピンク背景になりません。 </p> </div> </div> <div> <ol> <li><a href="http://○○.jp/"> div ol>li a </a></li> <li> a 要素がありません </li> <li> a 要素がありません </li> </ol> </div>
display
div > p
div と p の間にもう一つ div があるのでピンク背景になりません。
- div ol>li a
- a 要素がありません
- a 要素がありません
※ E、F など斜体は仮の名前です。