<!-- :scope -->
<div class="example-cntr scope">
    <h1>CSS <code>:scope</code> pseudo-class</h1>    
    <p>The <code>:scope</code> pseudo-class makes more sense when it’s tied to the <code>scoped</code> HTML attribute in a <code>&lt;style></code> tag. If there is no <code>scoped</code> attribute in a <code>&lt;style></code> tag within a section of the page, then the <code>:scope</code> pseudo-class will scope all the way out to the <code>&lt;html></code>, which is the default scope of a style sheet.</p>
    <p><em>Note: Firefox is the only one that supports this pseudo-class. That’s why we see this text in italics in all other browsers.</em></p>
    <p>In the following example, this HTML block has a <code>scoped</code> style sheet in the markup. All text inside the second <code>&lt;section></code> will be in italics:</p>
            <h1>Section 1 Heading</h1>
            <p>Lorem ipsum dolor sit amet.</p>
            <style scoped>
                    font-style: italic;
            <h1>Section 2 Heading</h1>
            <p>This text will be italicized.</p>

.scope {
    article {
        padding: 40px;
        font: 22px Garamond;
        color: lighten($g,30);
    h1 { text-align: left; }
    em { text-decoration: underline; }

//Styling stuff not needed for demo
body { text-align: left; }
h1 {
    font-size: 22px;
    text-transform: none;
    border-bottom: #636363 1px dotted;
    code {
        display: inline-block;
        margin-bottom: 10px;
        color: $y;
        background: none;
        box-shadow: none;
code { font-size: 1em; }
.example-cntr {
    max-width: 800px;
    margin: 0 auto 50px;
    padding: 30px;
    box-shadow: 0 1px 2px rgba(black,.3);
    background: rgba(black,.15);
    & > h1 { text-align: center; }
View Compiled

External CSS

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/codepen-base_3.scss

External JavaScript

This Pen doesn't use any external JavaScript resources.