Using all: inherit;

I’m working on Cascade and Inheritance here: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#test_your_skills!

About halfway down is an interactive editor for testing the fix-this class for the blockquotes.

When I changed “all: unset;” to “all: inherit;” I expected it to have inherit the styling of the top blockquote. But it doesn’t. Why not? I’ve obviously missed the point of the lesson.

The HTML:

<blockquote>
            <p>This blockquote is styled</p>
        </blockquote>

        <blockquote class="fix-this">
            <p>This blockquote is not styled</p>
        </blockquote>

The CSS:

blockquote {
    background-color: red;
    border: 2px solid green;
}
        
.fix-this {
    all: unset; <!-- change this to inherit -->
}

I think it’s because the top blockquote is not the “parent element” of the bottom blockquote, so it doesn’t inherit. Am I right?

That’s because inheritance comes from the parent, not from previous css declarations. The properties you see on all:inherit are the properties applied to the object the blockquote is contained in (a div/section/whatever)

I whipped up a quick example with obvious visuals

5 Likes

Very clear!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.