css 子セレクタ

cssを使っている際に出てくる>(山かっこ）

div > p{
color: red;
}

これは子供セレクタ、子セレクタというらしく、直接の子どもにしか適用されない模様。

div {
    background-color: bisque;
    width: 100px;
    height: 100px;
}
div p{
    color: blue;
}
div >p{
    color: red;
}

    <div>
        <p>あああ</p>
        <p>いいい</p>
        <div>
            <li>
                <p>ううう</p>
            </li>
        </div>
    </div>

結果