Duma's website

Child rule does not mean child element

I always tought that, either in SASS or in native CSS nested selector, it was possible only to refine a selector by appending attributes of child nodes. It turns out it isn’t so.

In other words, whenever the & is used in selectors it’s possible to write body & and it’ll create a legit selector. I expected that only refinements like & .some-children-class would work.

This is a partial example to show the mechanism: the haiku is green, while I would have expected it to be blue.

<html>
<head>
    <title>Test for CSS nesting and above selectors</title>
    <style>
        main {
            color: blue;
            body & { color: green; }
        }
    </style>
</head>
<body>
<main>
    I write, erase, rewrite<br/>
    Erase again, and then<br/>
    A poppy blooms.
</main>
</body>
</html>
Tags