*           { }  /* Universal — matches everything */
div         { }  /* Type/Element selector */
.card       { }  /* Class selector */
#header     { }  /* ID selector */
[type="text"]{ } /* Attribute selector */

div p       { }  /* Descendant — any p inside div */
div > p     { }  /* Child — direct p children of div */
div + p     { }  /* Adjacent sibling — p immediately after div */
div ~ p     { }  /* General sibling — any p after div */

[href]            { }  /* has attribute */
[type="submit"]   { }  /* exact value */
[class~="card"]   { }  /* contains word */
[lang|="en"]      { }  /* value is exactly or starts with "en-" */
[href^="https"]   { }  /* starts with */
[href$=".pdf"]    { }  /* ends with */
[href*="google"]  { }  /* contains substring */

a:hover        { }  /* mouse over */
a:focus        { }  /* keyboard focus / click */
a:active       { }  /* during click */
a:visited      { }  /* visited link */
input:disabled { }
input:checked  { }
input:required { }
input:valid    { }
input:invalid  { }

p:first-child           { }  /* first child of its parent */
p:last-child            { }  /* last child */
p:nth-child(2)          { }  /* 2nd child */
p:nth-child(odd)        { }  /* odd children (1, 3, 5...) */
p:nth-child(2n+1)       { }  /* same as odd */
p:nth-child(3n)         { }  /* every 3rd */
p:nth-last-child(1)     { }  /* last child (same as :last-child) */
p:first-of-type         { }  /* first p among siblings of same type */
p:last-of-type          { }  /* last p */
p:nth-of-type(2)        { }  /* 2nd p */
p:only-child            { }  /* only child of parent */
p:only-of-type          { }  /* only p among siblings */
:not(.disabled)         { }  /* negation */
:is(h1, h2, h3)         { }  /* matches any in list (takes highest specificity) */
:where(h1, h2, h3)      { }  /* like :is but specificity = 0 */
:has(> img)             { }  /* parent has direct img child */

p::before        { content: "→ "; }   /* insert before content */
p::after         { content: " ←"; }   /* insert after content */
p::first-line    { font-weight: bold; }
p::first-letter  { font-size: 2em; }
::selection      { background: yellow; }
::placeholder    { color: gray; }
::marker         { color: red; }       /* list bullets/numbers */

/* Which wins? */
p.intro { color: blue; }          /* 0,1,1 */
p       { color: red; }           /* 0,0,1 — loses */

#nav a  { color: white; }         /* 1,0,1 */
.nav a  { color: black; }         /* 0,1,1 — loses */

/* Same specificity — last declaration wins */
.card { background: blue; }       /* 0,1,0 */
.box  { background: red; }        /* 0,1,0 — red wins (later in CSS) */

1. Transitions (in-progress)
2. !important user agent styles
3. !important author styles
4. !important user styles
5. Author styles (specificity, then order)
6. User styles
7. User agent (browser default) styles

:root {
  --primary: #4f46e5;
  --spacing-md: 1rem;
  --font-heading: 'Inter', sans-serif;
}

.button {
  background: var(--primary);
  padding: var(--spacing-md);
  font-family: var(--font-heading, sans-serif);   /* fallback */
}

/* Override in scope */
.dark-theme {
  --primary: #818cf8;
}

/* :is() — matches any, uses highest specificity of list */
:is(h1, h2, h3) .title { }   /* specificity = 0,1,1 (from .title + element) */

/* :where() — always specificity 0 */
:where(h1, h2, h3) .title { } /* specificity = 0,1,0 */

/* :has() — parent selector (revolutionary!) */
.card:has(> img)  { }   /* card that directly contains img */
form:has(:invalid){ }   /* form that contains invalid field */
li:has(+ li)      { }   /* li that has a following sibling li */