HTML Element Selector
Select and highlight HTML elements in any file using CSS selectors — works with plain HTML and all major template engines.
Usage
Open any supported file, then:
- Press
Ctrl+Shift+Q (Windows / Linux) or Cmd+Shift+Q (Mac)
- Type a CSS selector and press Enter
- All matching elements are highlighted instantly
Keyboard Shortcuts
| Action |
Windows / Linux |
Mac |
| Open selector input |
Ctrl+Shift+Q |
Cmd+Shift+Q |
| Next match |
F4 |
F4 |
| Previous match |
Shift+F4 |
Shift+F4 |
| Clear highlights |
Esc |
Esc |
You can also right-click anywhere in a supported file and choose HTML: Select Elements by Selector from the context menu.
Selector Examples
div all div elements
.card elements with class "card"
#header element with id "header"
[data-id] elements with a data-id attribute
[type="text"] elements with type="text"
ul > li direct li children of ul
ul > li:first-child first li inside every ul
h1, h2, h3 all heading elements
.nav a anchor tags inside .nav
Tailwind CSS selectors
Selectors copied directly from browser DevTools work out of the box, including Tailwind classes with special characters:
div.lg\:grid-cols-12 matches class "lg:grid-cols-12"
div.py-1\.5 matches class "py-1.5"
div.bg-primary\/10 matches class "bg-primary/10"
Supported File Types
Works with HTML and all common template engines:
| Category |
Extensions |
| HTML |
.html .htm .xhtml |
| Jinja / Nunjucks |
.jinja .jinja2 .j2 .njk |
| Handlebars / Mustache |
.hbs .handlebars .mustache |
| Twig |
.twig |
| EJS |
.ejs |
| Vue / Svelte |
.vue .svelte |
| PHP |
.php |
| Ruby ERB |
.erb |
| Liquid |
.liquid |
| Pug |
.pug .jade |
| Other |
.tmpl .template .svg |
Template expressions ({{ }}, {% %}, <% %>) are automatically stripped before parsing so they never interfere with matching.
Smart Fallback
If a full-path selector like body > main > div.wrapper > span.label matches nothing (for example because your file's structure differs slightly from the one in DevTools), the extension automatically retries using only the last part of the selector (span.label) and notifies you with a warning.
Settings
Go to Settings → Extensions → HTML Element Selector to customise:
| Setting |
Default |
Description |
htmlElementSelector.highlightColor |
rgba(255, 200, 0, 0.35) |
Background color of highlighted elements |
htmlElementSelector.borderColor |
rgba(255, 160, 0, 0.9) |
Border color of highlighted elements |
htmlElementSelector.scrollToFirst |
true |
Auto-scroll to the first match on each search |
Diagnostics
If a selector returns no matches, the extension opens the Output panel automatically (Ctrl+Shift+U → select HTML Element Selector from the dropdown). It shows:
- The original selector as typed
- The transformed selector sent to the engine
- The number of matches at each step
This makes it easy to spot whether the issue is the selector syntax, the file structure, or a template parsing edge case.
Status Bar
While highlights are active a status bar item appears at the bottom-right showing the current selector and match count:
🔍 "div.card" — 6 matches · F4/⇧F4 to navigate · Esc to clear
Click it to clear all highlights.
