DONT ADD ANYTHING HERE!

@layer alayer, blayer, zlayer;
  1. Rules defined outside a cascade layer take precedence ('outside wins')
  2. Here illustrated for border, color and background-color
  3. The zlayer (last declared layer) has the highest CSS layer priority but here merely fullfills a 'housekeeping' role
  4. Rules declared in alayer (first declared layer) have lowest priority

Example (alayer ← blayer ← zlayer ← 'outside')

Hello world

Notes

  1. @layer alayer, blayer, zlayer;
  2. Declarations for border, color and background-color declared in alayer and blayer are not applied ('outside wins')

HTML

<div class="mycontainer">

    <div class="content_one">
        <p>Hello world</p>
    </div>

</div>

CSS

    @layer alayer, blayer, zlayer;

    @layer alayer {

        div.content_one {
            background-color: black;
            color: white;
            border: 2em solid red;
        }
    }

    @layer blayer {

        div.content_one {
            background-color: blue;
            color: magenta;
            border: 1em solid green;
        }
    }

    @layer zlayer {

        div.content_one {
            height: 10vh;
            display: flex;
            padding: 0 3em;
            margin: auto;
        }
    }

    div.content_one {
        background-color: yellow;
        border: 1em solid orange;
        color: cyan;
    }

Example (alayer ← blayer ← zlayer)

Hello world

Notes

  1. @layer alayer, blayer, zlayer;
  2. Rules defined in blayer have higher priority than those defined in alayer

HTML

    <div class="mycontainer">

        <div class="content_two">
            <p>Hello world</p>
        </div>

    </div>

CSS

        @layer alayer, blayer, zlayer;

        @layer alayer {

            div.content_two {
                background-color: black;
                color: white;
                border: 2em solid red;
            }
        } 
    @layer blayer {

        div.content_two {
            background-color: blue;
            color: magenta;
            border: 1em solid green;
        }
    } 
    @layer zlayer {

        div.content_two {
            height: 10vh;
            display: flex;
            padding: 0 3em;
            margin: auto;
        }
    }

Example (alayer ← blayer ← zlayer ← 'outside')

Hello world

Notes

  1. @layer alayer, blayer, zlayer;
  2. Properties declared from within the 'outside' code block have revert-layer as value
  3. Matching declarartions in the CSS layer with the highest priority are used
  4. revert-layer results in matching declarations in the next highest priority CSS layer being used
  5. Thus rules from blayer are applied

HTML

<div class="mycontainer">
    <div class="content_three">
        <p>Hello world</p>
    </div>
</div>

CSS

@layer alayer, blayer, zlayer;

@layer alayer {

    div.content_three {
        background-color: black;
        color: white;
        border: 2em solid red;
    }
}

@layer blayer {

    div.content_three {
        background-color: blue;
        color: magenta;
        border: 1em solid green;
    }
}

@layer zlayer {

    div.content_three {
        height: 10vh;
        display: flex;
        padding: 0 3em;
        margin: auto;
    }
}

    div.content_three {
        background-color: revert-layer;
        border: revert-layer;
        color: revert-layer;
    }

Example (alayer ← blayer ← zlayer ← 'outside')

Hello world

Notes

  1. @layer alayer, blayer, zlayer;
  2. Declarations for color, background-color and border in both 'outside' and blayer blocks have the revert-layer value
  3. Thus the declarations for these properties in alayer are used

HTML

    <div class="content_four">
        <p>Hello world</p>
    </div>

CSS

    @layer alayer, blayer, zlayer;

    @layer alayer {

        div.content_four {
            background-color: black;
            color: white;
            border: 1em solid red;
        }
    }

    @layer blayer {

        div.content_four {
            background-color: revert-layer;
            color: revert-layer;
            border: revert-layer;
        }

    }
    
    @layer zlayer {

        div.content_four {
            height: 10vh;
            display: flex;
            padding: 0 3em;
            margin: auto;
        }
    }


    div.content_four {
        background-color: revert-layer;
        border: revert-layer;
        color: revert-layer;
    }

Mnemonic

Hi(gh)! Get last

References