diff options
| -rw-r--r-- | web/css.md | 78 |
1 files changed, 37 insertions, 41 deletions
@@ -13,46 +13,45 @@ So here is some sort of reference. If you're me, hi! I hope this was helpful. If https://css-tricks.com/whats-new-since-css3/ -## Selectors -- [selectors](https://developer.mozilla.org/Web/CSS/CSS_selectors) -- [nesting](https://developer.mozilla.org/Web/CSS/CSS_nesting) - -`foo {...}`: a **type selector** matches all elements of the type `foo`. - -`.foo {...}`: a **class selector** matches all elements of the class `foo`. - -`#foo {...}`: an **identifier selector** matches a single element by its unique id `foo`. - -`foo[attr] {...}`: an **attribute selector** matches an element `foo` that has the attribute `attr`. - -`foo, bar {...}`: the **selector list** matches both the elements `foo` and `bar`. - -`foo bar {...}`: the **descendant combinator** matches some element `bar` that is a descendant of `foo`. A descendant of `foo` is any element that is nested within it, at any level in the tree. - -`foo { bar {...}}`: **nesting syntax** - -`foo { &bar {...}}`: a **nesting selector** +https://css-tricks.com/ +https://www.joshwcomeau.com/css/ -`foo > bar {...}`: the **child combinator** matches some element `bar` if `bar` is a direct child of `foo`. A child element is an - -- :first-child, :last-child, :only-child, :nth-child(), nth-last-child() -- :first-of-type, :last-of-type, :only-of-type, :nth-of-type(), :nth-last-of-type() - -`:empty {...}`: the **empty pseudo-class** selects an element that does not have any children. - -`foo + bar {...}`: the **next-sibling combinator** selects all elements `bar` that are the (direct) next sibling `bar` of some elements `foo`. - -`foo ~ bar {...}`: the **subsequent-sibling combinator** selects all elements `bar` that are a subsequent sibling of some elements `foo`. - -`:has(...) {...}`: -The child, next-sibling, and subsequent-sibling combinators - with the exception of `:empty` - all match a *child element*. It is often desired to match the *parent element* instead: some element that *has*, - -`:not(...) {...}`: - -`:is(...) {...}`: -The `:is` pseudo-class takes a list of selectors, and selects any element matchable by one or more +## Selectors -`:where()` +CSS functions by *selecting* HTML elements, and then *applying* styles to them. +A rich assortment of selectors are provided: that can programmatically match any node in the document tree, with + +- `* {...}` the **universal selector** matches any element +- `foo {...}` the **type selector** matches any element of *type* `foo` +- `.foo {...}` the **class selector** matches any element of *class* `foo` +- `#foo {...}` the **identifier selector** matches any element of *id* `foo` +- `foo[attr=value] {...}` the **attribute selector** matches any element with *attribute* `attr` +- `foo, bar {...}` a **selector list** matches *either* `foo` or `bar` +- `foo.bar {...}, foo#bar {...}` a **compound selector** matches *both* `foo` and `.bar`/`#bar` +- `foo bar {...}` a **descendant selector** matches any element `bar` whose *ancestor* is `foo` +- `foo { bar {...}}` **nesting notation** compactly expresses complex descendant selectors + - `foo { bar {...} baz {...}}` is equivalent to `foo bar {...} foo baz {...}` +- `foo { & bar {...}}` the **nesting selector** attaches selectors directly when nesting + - `foo { & :bar {...}}` is equivalent to `foo:bar {...}` +- `foo { bar & {...}}` the **nesting selector** also can reverse the rule context when nesting + - `:foo { bar & {...}}` is equivalent to `bar:foo {...}` +- `foo > bar {...}` the **child combinator** matches any element `bar` that is a *direct child* of `foo` +- `foo:nth-child(<n>)` the **:nth-child pseudo-class** selects the *nth-child* of `foo` + - some similar pseudo-classes are `:first-child`, `:last-child`, `:only-child`, `nth-last-child()` +- `foo:nth-of-type(<n>)` the **:nth-of-type pseudo-class** selects the *nth element* among siblings of type `foo` + - some similar pseudo-classes are `:first-of-type`, `:last-of-type`, `:only-of-type`, `:nth-last-of-type()` +- `foo:empty {...}` the **:empty pseudo-class** matches an element with no children +- `foo + bar {...}` the **next-sibling combinator** matches any element `bar` that is the direct next sibling of `foo` +- `foo ~ bar {...}` the **subsequent-sibling combinator** matches any element `bar` that is a subsequent sibling of `foo` +- `:has(<relative selectors>) {...}` the **:has pseudo-class** selects an element that *has* any of the provided relative selectors. this is somewhat of a limited *parent selector* +- `:not(<selectors>) {...}` the **:not pseudo-class** selects any element that does *not* match any of the provided selectors. it can create invalid selectors +- `:is(<selectors>) {...}` the **:is pseudo-class** matches multiple selectors in a list +- `:where(<selectors>) {...}` the **where pseudo-class** functions like the :is pseudo-class, but with *specificity 0* + +Reference +- [CSS selectors](https://developer.mozilla.org/Web/CSS/CSS_selectors) +- [CSS nesting](https://developer.mozilla.org/Web/CSS/CSS_nesting) +- [The Undeniable Utility Of CSS :has](https://www.joshwcomeau.com/css/has/) ## Properties @@ -76,9 +75,6 @@ CSS custom properties (or variables)... - display ### the box model -- [box model](https://developer.mozilla.org/Web/CSS/CSS_box_model) -- [box sizing](https://developer.mozilla.org/Web/CSS/CSS_box_sizing) -- [box alignment](https://developer.mozilla.org/Web/CSS/CSS_box_alignment) - width - min-width |