CSS Hierarchy Limits

Using the greater than sign in CSS to restrict hierarchal selectors.

by Preston Badeer

HTML

<ul>
    <li>
        level 1
        <ul>
            <li>level 2</li>
        </ul>
    </li>
</ul>

CSS

ul li{
    color:green; /*both*/
}
ul > li{
    background:blue; /*only level 1*/
}
ul > li > ul li{
    background:red; /*only level 2 and up*/
}