Skip to main content Accessibility Feedback

Using multiple selectors with querySelector(), querySelectorAll(), closest(), and matches()

The document.querySelector(), document.querySelectorAll(), Element.closest(), and Element.matches() methods all accept CSS selectors are their argument.

One thing people often don’t realize is that you can pass in any valid CSS selector. That includes comma-separated selectors for targeting multiple different selectors.

For example, in CSS, if you wanted to add a font-weight of bold to both elements with the .sandwich class and label elements inside the #contact form, you would do this.

.sandwich,
#contact label {
	font-weight: bold;
}

If you wanted to get the first of those elements on a page, you would pass them in as a comma-separated list into querySelector().

var sandwichOrLabel = document.querySelector('.sandwich, #contact label');

The selector follows the same pattern as CSS.

// Get's any element with the .sandwich class, and all labels inside the #contact element
var elems = document.querySelectorAll('.sandwich, #contact label');

// Checks if the element has the .sandwich class or is a label in the #contact element
if (element.matches('.sandwich, #contact label')) {
	// Do stuff...
}

// Checks if the element is in an element with the .sandwich class or a label in the #contact element
if (elem.closest('.sandwich, #contact label')) {
	// Do stuff...
}

This works with any JavaScript method that access a CSS selector as it’s argument. It doesn’t work with things like getElementById() or getElementsByTagName(), because you’re only passing in the value and not a selector.