> The "cascade" was, for sure, a mistake. Aren't global styles only possible bec...

strbean · on July 23, 2020

The cascade is not inheritance. The cascade is deciding the order to apply rules/stylesheets in, and which rule applies here:

html:

    <div><a>Blah</a></div>

css:

    a { color: red; }
    div a { color: blue; }

Where the font color ends up being blue because `div a` is more specific than `a`.

azangru · on July 23, 2020

Shoot! My mental picture of a cascade was completely different from what the author of the thesis referenced above had in mind.

fireattack · on July 23, 2020

I assume this is inheritance then?

    a { color: red; }
    div { color: blue; }

(Blah will be red now.)

(I have little knowledge of CSS.)

bryanrasmussen · on July 23, 2020

In a CSS context inheritance is an element inheriting properties of a parent or ancestor - so

div { color: blue; }

without any definition for what 'a' element color will be, it ends up having the color blue because it inherits it.

this is of course why we have the inherit keyword https://developer.mozilla.org/en-US/docs/Web/CSS/inherit so you could do

div { color: blue; }

a { color: red; }

.myspecialdivclass a {color: inherit}

where myspecialdivclass has the default color of blue and as a result the a elements in it will inherit the color.

all that said, inheritance and the cascade sort of leak into each other since they both affect what properties are set for individual elements.

on edit: formatting

im3w1l · on July 23, 2020

    .big-list > li {font-size: 200%}

im3w1l · on July 23, 2020

Replying to myself: What if you want to have a link or a span inside your list though? Wouldn't it look weird if they have different size than the surrounding text?