Visually connect tags, selectors, and elements on the page

In order to aid students’ understanding of the relationship between different bits of the code, it would be very cool to visually connect selectors to tags, and vice versa. E.g., if I place the cursor within a selector in the CSS code, we could subtly highlight (maybe with an outline) the tag(s) in the HTML that correspond to it. Similar thing with jQuery selectors (this is more of a bonus feature though).

As a corollary, placing the cursor in a tag should (subtly!) highlight the element on the page corresponding to that tag; placing the cursor in a CSS selector should highlight all elements on the page matching that selector.

L’issue ne mentionne aucun fichier, test ou point d’entrée. Commencez par localiser l’éditeur HTML/CSS et l’intégration de l’aperçu de la page, puis suivez la manière dont les sélections du curseur et les éléments DOM sont représentés. Le travail est considéré comme terminé lorsque les sélecteurs et les balises mettent visiblement en évidence leurs éléments correspondants dans l’aperçu dans les deux sens, les sélecteurs jQuery étant traités comme une extension facultative.