test page
Stuff I’m working on...
Cases:
camelCase: capitalise the first letter of every word except the first (the capital letters resemble camel humps)
PascalCase: capitalise the first letter of every word (popularized by the Pascal programming language)
kebab-case: separate each word with a dash (the words looks similar to meat on a kebab skewer)
snake_case: separate each word with an underscore (the underscores resemble the belly scales of a snake)
CSS reference
The headings below are links to 
W3Schools CSS reference pages
CSS attribute selectors:
selectors “select” the HTML elements to style (i.e. element-name, id, & class)
“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
freeCodeCamp - casings differences
:has pseudo-class blog
