CSS selectors - all vs. immediate

Illustrating the difference between selecting immediate children as opposed to all children.

by Erik Woods

HTML

<div class="all">
    <p>all children (.class1 .class2):</p>
    <div class="class1">
        <div class="class2">.class1 .class2</div>
        <div class="some-other-class">
            <div class="class2">.class1 .some-other-class .class2</div>
        </div>
    </div>
</div>

<div class="immediate">
    <p>immediate children (.class1 &gt; .class2):</p>
    <div class="class1">
        <div class="class2">.class1 .class2</div>
        <div class="some-other-class">
            <div class="class2">.class1 .some-other-class .class2</div>
        </div>
    </div>
</div>

<footer>
    <p>Illustrating the difference between selecting immediate children as opposed to all children.</p>
    <p><a href="http://erikwoods.com" target="_blank">Fiddle by Erik Woods</a> | <a href="http://jsfiddle.net/user/erikwoods/fiddles/" target="_blank">Other Fiddles by Erik Woods</a></p>
</footer>

SCSS

.all {
    .class1 .class2 {
        background: #0f0;
    }
}

.immediate {
    .class1 > .class2 {
        background: #0f0;
    }
}

/*** IGNORE EVERYTHING BELOW BECAUSE IT IS IRRELEVANT ***/
.immediate, .all {
    margin: 10px 0;
    padding: 10px;
}

.class2 {
    border: 1px solid #000;
    margin: 5px 0;
    padding: 2px;
}

footer {
    background: #ff0;
    border: 0 none;
    border-top: 1px solid #000;
    bottom: 0;
    color: #000;
    padding: 10px;
    position: fixed;
    width: 100%;
}