Css selectors

Selectors determine what the following block of CSS applies to.

Documentation

w3schools css selectors reference	https://www.w3schools.com/cssref/css_selectors.asp
MDN css	https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps
MDN css selectors	https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors

Selectors

element/class/id

li     { ... }    /* elements of type 'list' */
.class { ... }    /* elements of class 'class' */
#id    { ... }    /* elements with id 'id' */

li.class { ... }  /* list element of class 'class' */

attributes

a[title]                  { ... }  /* a elements with attribute 'title' defined */
a[href="https://foo.com"] { ... }  /* a elements with attribute 'href' and value 'https://foo.com' */

pseudo class/elements

a:hover      { ... }  /* when 'a' has the 'hover' pseudo-class */
p::first-line { ... }  /* the pseudo-element 'first-line' of 'p' */

hierarchy

*
li em { ... }     /* 'em' elements at any level under 'li' */
li + em { ... }   /* 'em' elements that are direct children of 'li' */

misc

li, em            /* select both 'li' and 'em' elements */

state

a:hover { ... }   /* 'a' elements when under cursor */