The Only CSS Selectors & Pseudo-Classes You Need

Out of all 90+ selectors, you only need to remember these 20

Element type selector

Class selector

ID selector

Universal selector

Attribute selector

  • [attr] Has an attr attribute
  • [attr=value] Has an attr attribute, whose value is exactly value
  • [attr*=value] Has an attr attribute, whose value contains value
  • [attr^=value] Has an attr attribute, whose value starts with value
  • [attr$=value] Has an attr attribute, whose value ends with value

Descendant combinator

Child combinator

Adjacent sibling combinator

General sibling combinator

:hover

:focus

:not()

:any-link

  • To only match links that haven’t been visited yet, use :link
  • To only match links that have been visited before, use :visited

:disabled

:nth-child() & :nth-last-child()

  • :first-child
  • :last-child
  • :only-child

:nth-of-type() & :nth-last-of-type()

  • :first-of-type
  • :last-of-type
  • :only-of-type

:invalid & :valid

:required & :optional

:root

::before / ::after

::placeholder

Other articles you might find interesting:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store