If you find yourself constantly struggling to categorize the numerous types of CSS selectors and combinators. I've often found myself forgetting the different classifications, which led me to create selectors.info - a tool designed to systematically organize and visualize CSS selectors and combinators by their respective types. This tool serves not only as a practical reference but also as a learning guide.
Write, Parse, and Classify
Write your list of selectors and combinators, and the tool will parse and categorize them, as an example on how the HTML below will be classified accordingly:
.navigation > li:last-child a
Will be categorised like:
- Selectors
- Class:
.navigation
- Type:
li
anda
- Pseudo-Class:
:last-child
- Class:
- Combinators
- Child:
>
- Descendant: space
- Child:
Easy Navigation
Once your CSS selectors are parsed and divided into categories and subcategories (e.g., Selectors
as a Category and Pseudo-Class
as a SubCategory), you can easily highlight each type within the code by clicking on a Subcategory.
Concise Descriptions for Every Classification
For each selector or combinator type, it provides a brief yet informative summary, offering an insightful glimpse into its implementation.
Tool Features
- Classify Selectors and Combinators: Organize and visualize their types.
- Understand Selector Types: Includes Type Selectors, Classes, IDs, Attributes, Pseudo Classes, and Pseudo Elements.
-
Explore Attribute Types: Clear definitions for specific matchers like Prefix Matcher
^=
, Suffix$=
, etc. - Combinators Type Insight: Breakdown of combinators types like Descendant, Child, Next Sibling.
- Interactive Editor: Immediate classification by Selectors, Combinators, and Attributes Types, with highlighting.
Conclusion
selectors.info is a practical tool that visually categorizes selectors and combinators. It is designed to assist anyone looking to understand and organize CSS selectors and combinators better
Top comments (2)
This is great! Was a bit confused when I got to the page but once I toggled things for a bit it made more sense.
Thanks! I did my best to ensure the tool is intuitive. The concept is simple: you input selectors or combinators, the tool outputs their types, and you have control to highlight these types.