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.
He announced the tool on Twitter late last month (February 24, 2020):
Hugo “Kitty” Giraudel@hugogiraudel✨ Formally introducing “Selectors Explained” now that it works okay.
🤯 A small utility to demystify CSS selectors, explaining them in plain English.
🔗 hugogiraudel.github.io/selectors-expl…08:42 AM - 24 Feb 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:
Hugo “Kitty” Giraudel@hugogiraudel@vietanhlehuu I didn't implement the :not pseudo class because it's pretty difficult. I should add a note about it.06:57 AM - 25 Feb 2020
The tool can be used alongside specificity calculator by Keegan Street.
Updated July 16, 2021: Updated the link to the selectors explained tool thanks to a comment by @unclejustin