#descendant {
    .box p {
        color: red;
    }
}

#child {
    ul>li {
        border-top: 5px solid red;
    }
}

#next-sibling {
    h1+p {
        font-weight: bold;
        background-color: #333;
        color: #fff;
        padding: 0.5em;
    }
}

#subsequent-sibling {
    h2~p {
        font-weight: bold;
        background-color: #333;
        color: #fff;
        padding: 0.5em;
    }
}

#nesting {
    h1 {
        &~p {
            /* this is parsed by the browser as h1 ~ p */
            font-weight: bold;
            background-color: #333;
            color: #fff;
            padding: 0.5em;
        }
    }
}