DEV Community

Habdul Hazeez
Habdul Hazeez

Posted on • Edited on

Selectors explained: Translate CSS Selectors into plain English

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

Top comments (2)

Collapse
 
unclejustin profile image
Justin Boyson

For anyone else looking the site has moved to kittygiraudel.github.io/selectors-...

Collapse
 
ziizium profile image
Habdul Hazeez

Thanks for your comment.

The article was updated with the new link for the tool.