CSS KP 03 — Utility Classes 02— spacing

We can also add spacing classes to our utility classes. To reduce the extra space caused by selecting all elements, we utilize the lobotomized owl, * + *, which selects all children that have an adjacent sibling directly before them.

In example (a), it selects all the children. In example (b), it doesn’t select the first child, thereby reducing the double margin at the top.

lobotomized owl

//utility class -- general 

.flow > * + * { 
    /*used by Andy Bell, lobotomized owl coined by Heydon Pickering */
    /* all children from the bottom that has an adjacent silbling directly before it */
    margin-top: 1rem;
    outline: 1px solid red;
}

//below two don't select the first child.
.flow > * + * {
.flow > *:where(not(:first-child)) {
//but lobotomized owl is preffered because it's less specific.

The reason we don’t select the first child is that if you select all (*), it adds unnecessary extra margin space, as shown below.

* vs. *+* — — —-Compare the top margin, * gives an extra margin space that’s unnecessary

Dynamic spacing

css

//css
.flow > * + * {
    margin: var(--flow-space, 1rem); //var(preferred if not, default)
}

html

html

<div class="flow" style="--flow-space: 4rem;">

CSS people

Kevin Powell: https://www.kevinpowell.co/

Heydon Pickering: https://heydonworks.com/

Andy Bell: https://andy-bell.co.uk/