Gatlin.io Icon
Image of Austin Gatlin's face
March 8, 2022

CSS Selectors

MDN Docs for all CSS Selectors

Attribute selectors

MDN Docs for all Attribute Selectors

These are things like div[class*='someclass'] would would match aclass someclass anotherclass.

Combinators

Hard to remember selectors

Space Between Selector

ol > * + * {
  margin-top: 1rem;
}

For direct descendants of ordered list (so, list items, <li>), for any element that is the adjacent sibling to any other element, apply margin top. This has the effect of giving every element except the first element a margin top. Semantically, this is a "space between" styling. This is essentially how tailwindcss implements their space between space-y-4 class, where ol is replace by the class, e.g.,

.space-y-4 > * + * {
  margin-top: 1rem;
}