CSS Combinator Demo

CSS Selector Combinator Demo

The Gist is a demo of of CSS selector combinators. See MDN for documentation: CSS Selectors

Usage:

• Click on an element inside the content-container. The clicked element becomes the root of the selection, and its background color becomes gray.
• Then choose one of the CSS combinators at the left. The default combinator is the Descendant combinator (A B).
• Explore what’s selected given your choice of combinator and clicked element
• A red border indicates the element(s) selected

Please note: While the component tree contains both div and span elements, only div elements are selected.

The Gist also demos:

• How to construct a DOM structure recursively from a nested javascript object using native DOM methods only (no external libraries are used)
• How to add click handlers to DOM elements produced by the code
• How to refresh the visualization after the two types of click events (combinator choice and element selection)

The Gist is alive here