This site runs best with JavaScript enabled.

* + * is a clever css selector

Kevin Beck

November 22, 2019


* + *

Other wise known as the lobotomized owl selector. See alistapart.com for in depth explanation and more examples.

Example

Take:

<main class="cards">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>

and apply:

.cards * + * {
margin-top: 1em;
}

Will only apply a margin-top to an element in .cards if it is adjasent to another. No more bloat.

Source