Modern CSS

Some examples of modern CSS

Nesting

Your browser does not support nesting

<div class="nesting-example1">
<div class="s1">
<p class="no-testing">Your browser does not support nesting</p>
</div>
<div class="s2"></div>
</div>
.nesting-example1 {
    padding: 1rem;
    display: flex;

    .no-testing {
        display: none;
    }

    & div {
        padding: 2em;
        height: 5em;
        width: 100%;
    }

    .s1 {
        background: green;
        position: relative;
    }
    .s2 {
        background: orange;
    }

    .s1::after {
        content: 'Your browser supports nesting';
        position: absolute;
        color: white;
        font-family: Arial, Helvetica, sans-serif;
    }
}