子セレクタとは
E > F { ... } のように書くと、
親要素 (E) の直属の子要素 (F) のみを対象とさせる。
下記サンプルコードは対象のものだけボーダーを入れた。
その挙動が何故かおかしい。
.sample * {
display: block;
background: #f2f2f2;
color: #000;
font-size: 12px;
max-width: 300px;
width: 100%;
padding: 0;
margin: 0;
}
.sample > div {
/* .sample 直下の div だけボーダーを入れる */
border-right: 4px #000 solid;
margin: 0 0 2px;
}
<div class="sample">
<div>div</div>
<div>div</div>
<p>
p
<div>p > div</div>
<div>p > div</div>
<p>p > p</p>
<div>p > div</div>
</p>
<div>
div
<div>div > div</div>
<div>div > div</div>
<div>div > div</div>
</div>
<p>
p
<div>
p > div
<div>p > div > div</div>
<div>p > div > div</div>
<div>p > div > div</div>
</div>
<div>
p > div
<div>p > div > div</div>
<div>p > div > div</div>
<div>p > div > div</div>
</div>
</p>
<div>
div
<div>
div > div
<div>div > div > div</div>
<div>div > div > div</div>
<div>div > div > div</div>
</div>
</div>
<div>
div
<div>div > div</div>
<div>div > div</div>
<div>div > div</div>
</div>
</div>
おそらく p や li などの終了タグが省略可能なタグ (li は省略可能になる条件がある) を使うと挙動がおかしくなる。
もちろん終了タグが必須なタグを使用した場合は期待通りの挙動になる。