• A way to style an element based on the change of its state.

Examples

• :hover - Mouse is hover over elemnet

• :focus - When user is actively using form

• :disabled - When button is disabled by html

• :not() - Chooses opposite of what’s specified

  li:not(:hover){} //This will modify everything that isn't hovered
  

• :focus-within - When using dropdown menu, keep it open while navigating

• :lang - used to modify anything that may have different language

• Lists - Ways to modify specific items in the list

  li:first-of-type{}
  li:last-of-type{}
  li:first-child{}
  li:last-child{}
  
  li:nth-child(n){}
  li:nth-child(odd){}
  li:nth-child(5n){}
  li:nth-child(3n-1){}