Selectors explained: Translate CSS Selectors into plain English

Habdul Hazeez - Mar 2 '20 - - Dev Community

CSS selectors are used to select HTML elements on a web page. There are different type of selectors some of which are:

  • Attribute Selectors
  • Descendant Selectors
  • Class Selectors
  • ID Selectors

The list above is inconclusive. For more information about CSS selectors please refer to my post on CSS Selectors.

Depending on your coding style CSS selectors can get really complex and unless you have a good understanding about them you might need someone or something to explain it to you.

When you find someone to sit you down and explain the quirks of CSS selectors to you congratulations! However, there is an online tool that can be of help.

Selectors explained: An online tool

Selectors explained is an online tool by Hugo Riraudel

He announced the tool on Twitter late last month (February 24, 2020):

The tool is useful and it tries it's best to explain the provided selectors. However, it's currently in alpha and it has some limitations:

The tool can be used alongside specificity calculator by Keegan Street.

Have fun!

Updated July 16, 2021: Updated the link to the selectors explained tool thanks to a comment by @unclejustin

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .