A Tool for Learning to Classify CSS Selectors and Combinators

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 and a
  • Pseudo-Class: :last-child
• Combinators
  • Child: >
  • Descendant: space

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

Comments

[Efren Marin]

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.

[Arbaoui Mehdi]

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.