Using all: inherit;

I’m working on Cascade and Inheritance here:!

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.


            <p>This blockquote is styled</p>

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

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


Very clear!

1 Like

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