meow

1 files changed, 37 insertions, 41 deletions

diff --git a/web/css.md b/web/css.md
index 75f39c9..873e03c 100644
--- a/web/css.md
+++ b/web/css.md
@@ -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