CSS Combinator Demo
CSS Selector Combinator Demo
The Gist is a demo of of CSS selector combinators. See MDN for documentation: CSS Selectors
- 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
span elements, only
div elements are selected.
The Gist also demos:
- 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