/
🦉

The “Lobotomised Owl” Selector

css
On this page
  • Flow space utility

It may have a strange name but using the universal selector (*) with the adjacent sibling selector (+) can provide a powerful CSS capability:

css
* + * {
margin-top: 1.5em;
}

In this example, all elements in the flow of the document that follow other elements will receive margin-top: 1.5em.

For more on the "lobotomised owl" selector, read Heydon Pickering's post on A List Apart.

Demo

Flow space utility

The flow utility provides flow and rhythm between direct sibling elements. Where --flow-space is not defined: the default value is 1em, which equals the font size of the affected element.

css
.flow > * + * {
margin-top: var(--flow-space, 1em);
}

By defining --flow-space in the CSS of either a child element of .flow, or on .flow itself: that value will be honoured in line with the cascade and specificity.

For example: if you set --flow-space: 3rem on the third element inside of a .flow container: only that element will have a 3rem top margin.

Edit this page
Want to make your own site like this?
Try gatsby-theme-code-notes by Zander Martineau.
Notes on code. My second brain, by Zander Martineau.