How to use CSS selector in JavaScript to find element that includes a specific class?

Question

The correct way to give an element multiple classes is simply put spaces between them. Right?

Then why does the selector [class=CLASSNAME] not work unless it's the only class?

[class^=CLASSNAME] works if the class is the first one.

But how to select all elements that possess a given class, regardless of the number or order of their classes?

I want to select all the elements with class foo-bar. But the code below only selects the first one.

const selector = '[class=foo-bar]';
const divs = document.querySelectorAll(selector);
console.log([...divs].map(div => div.textContent));

<div class="foo-bar">foo</div>
<div class="foo-bar baz">bar</div>
<div class="baz foo-bar">baz</div>

That's an attribute selector not a class selector, developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors — Robert
– Robert, Commented Sep 29, 2020 at 23:04

Barmar · Accepted Answer · 2020-09-29 23:02:23Z

3

When you use an attribute selector, it's matching against the entire attribute value as an ordinary string. It doesn't treat the class attribute specially, so it's not considered to be a list of classes that can be matched individually.

Just as in CSS, use .classname to match any class in the list.

const selector = '.foo-bar';
const divs = document.querySelectorAll(selector);
console.log([...divs].map(div => div.textContent.trim()));

<div class="foo-bar">foo</div>
<div class="foo-bar baz">bar</div>
<div class="baz foo-bar">baz</div>

answered Sep 29, 2020 at 23:02

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use CSS selector in JavaScript to find element that includes a specific class?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related