While I am studying CSS, I have encountered an issue with the child selector not working properly.
<style>
header > p{
color: red;
}
</style>
<header>
<p>
aaa
<div>bbb</div>
</p>
</header>
It only makes 'aaa' red and does not apply the style to 'bbb'.
<style>
header > div{
color: red;
}
</style>
<header>
<div>
aaa
<p>bbb</p>
</div>
</header>
Interestingly, when using this code, it applies the style to both 'aaa' and 'bbb'. Why is that?