CSS reference
The headings below are links to 
W3Schools CSS reference pages
CSS attribute selectors:
selectors “select” the HTML elements to style e.g: href, title, lang, id, class, etc
“attribute selectors” select elements with a given attribute set
| select elements with: | |
| class | - the “class” attribute |
| class = "ar" | - “class” = “ar” |
| class ~= "ar" | - “class” contains the word “ar” (in a space-separated list) |
| class |= "ar" | - “class” = “ar” or starts with “ar” followed by a ‘-’ |
| class ^= "ar" | - “class” starts with “ar” |
| class $= "ar" | - “class” ends with “ar” |
| class *= "ar" | - “class” contains “ar” |
CSS combinators:
a sign that explains the relationship between selectors
| , | list of selectors | - all matching elements |
| (space) | descendant | - all elements that are descendants (children, children’s children, etc) |
| > | child | - all elements that are direct children (only immediate children) |
| + | next sibling | - element that is directly after (both share the same parent) |
| ~ | subsequent-sibling | - all elements that are next siblings (both share the same parent) |
note: siblings = brother/sister i.e. same level, not parent/child
CSS pseudo-classes:
added to a selector to define a style for a special state of an element
| :has() | - any parent element that has a specific sibling or element inside it |
| :hover | - select on mouse over |
| :not() | - any element that is NOT the specified element/selector |
| :first-child | - first child of its parent |
| :nth-child() | - the nth child of its parent |
CSS pseudo-elements:
used to style specific parts of an element
| ::before | - insert something before the content of an element |
| ::after | - insert something after the content of an element |
| ::first-line | - first line of an element |
| ::first-letter | - first letter of an element |
| ::selection | - the part of a text that is selected |
| ::backdrop | - the viewbox behind a <dialog> box |
Links
JoshWComeau - web developer:has pseudo-class blog
