CSS Selectors and Combinators

Image of Author
March 8, 2022 (last updated April 26, 2023)

MDN Docs for all CSS Selectors

Attribute selectors

MDN Docs for all Attribute Selectors

These are things like div[class*='someclass'] which 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;
}