Selectors

Tag Selector (using tag name): li
ID Selector (using # symbol): #p18
Class Selector (using dot symbol): .bird

Combining Selectors

OR logic (comma separated)

blockquote,
.speech {
  color: red
}

AND logic (no space)

blockquote.speech {
  color: red
}

Descendant Combinator Selector

Multi-level children (using space)

#intro a {}

Direct Descendant (using > symbol)

#intro > a {}

Sibling (Brother) Combinator Selector

General sibling (using ~)
Adjacent (Immediate next) sibling (using +)
https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector

Attribute Selector

Selects elements with attributes:
attribute exists

/* <a> elements with a title attribute */
a[title] {
  color: purple;
}
/* all elements with title attribute */
[title] {
    color: purple;
}

Exact Match (using =)

input[type="text"] {}

Prefix Match (using ^=)

a[href^="https"] {}

Suffix Match (using $=)

a[href$=".pdf"] {}

Substring Match (using *=)

a[href*="css"] {}

Everything Selector

Select everything (using * )

/** Select all direct descendant elements of body tag **/
body > * {}
 
/** Select all multilevel descendants of p tag **/
p * {}

Pseudo Selector

Pseudo state of element (using colon :)

a:hover {}

Pseudo (Imaginary) element (using double colon ::)

.container::before {}