Links
https://www.freecodecamp.org/news/css-selectors-cheat-sheet/ https://frontend30.com/css-selectors-cheatsheet/ https://welcm.uk/downloads/CSS-Selectors-Cheatsheet.pdf (local copy) W3 org
Simple stuff
* { }
a { }
#a { }
a.b { }
.b { }
a.b.c { }
.b.c { }
a b { } b if a is an ancestor of b
a > b { } b if b is a child of an a
a * { } any with a as an ancestor
a * * { } any with a as an ancestor and at least one element in between the topmost a
a + b { } b directly after a
a ~ b { } b if it is preceded by an a
a:hover
a:before
a:first-child
a:only-child
a:last-child
a:nth-child(2|odd|even)
a:nth-last-child(2)
a:first-of-type
a:nth-of-type(2)
a:nth-of-type(odd|even)
a:nth-of-type(2n+1)
a:only-of-type
a:last-of-type
a:empty
a:not(selector)
a[href] { } a has an href
a[href="flibble"] { } href is exactly "flibble"
a[href*="://"] { } href contains :// so is not site local
a[href^="https://"] { } href begins with https://
a[href$=".zip"] { } href ending with .zip
a[href]:not([href*="://"]) { } href without a :// (i.e. site local href)
a[prop|="ab"] { } Selects <a prop="ab">, <a prop="ab-c"> but not <a prop="abc">