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
-
-
>is the child combinator, often call the direct descendant combinator, in contrast to the more generic -
+is the adjacent sibling combinator -
*is the universal combinator
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;
}