selecting tag with a specific attribute(only)

Question

I have the following document structure in :

...
...
<span class="clblue redcl turbocl">something</span>
<span class="clblue redcl turbocl">something</span>
<span class="clblue">something</span>
<span class="clblue">something</span>
...
...

In JavaScript (only) I want: document.querySelectorAll("span.clblue") to give span with ONLY 'clblue' class NOT all the span(s) with 'clblue' and also other classes.

So, only select the items that have a *single* class and that single class is `clblue`, is that correct? — VLAZ, Oct 09 '19 at 10:59
check the [:not()](https://developer.mozilla.org/en-US/docs/Web/CSS/:not) CSS pseudo-class. can be used for excludes — admir86, Oct 09 '19 at 11:04
You know that adding your own attributes is invalid code, right? Use [data- attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). — Scott Marcus, Oct 09 '19 at 11:05

score 4 · Answer 1 · answered Oct 09 '19 at 11:00

4

If you want to match a single class only rather than that class among others, you can use an attribute selector:

document.querySelectorAll('span[class="clblue"]');

answered Oct 09 '19 at 11:00

Mitya

33,629
9
60
107

dnaz · Answer 2 · 2019-10-09T13:45:50.140

1

With CSS select only one class name,

span[^="clblue"][$="clblue"] { ... }

Then We select it with JS,

let x = document.querySelectorAll("span[class^=clblue][class$=clblue]"); // NodeList

// x[0], x[1]... x[n]

edited Oct 09 '19 at 13:45

answered Oct 09 '19 at 11:24

dnaz

276
5
14

The OP asked for JavaScript solutions only. – Mitya Oct 09 '19 at 12:01
@Utkanos any JS solution will require using a CSS selector, so providing the selector isn't a wrong solution as we can easily later integrate it with querySelector() – Temani Afif Oct 09 '19 at 12:06
Well that's like saying "it's currently an unusable answer but we *could* modify it to make it work". I get what you're saying - of course you can feed (most of) this answer to `querySelector`, but right now it's a CSS answer, not a JS one, and does not therefore match what the OP asked for. – Mitya Oct 09 '19 at 12:10
Ok @Utkanos and owner of ques.. I edited my answer. – dnaz Oct 09 '19 at 13:48
Downvote retracted. – Mitya Oct 09 '19 at 13:53

score 0 · Answer 3 · answered Oct 09 '19 at 11:16

0

What about filtering out the querySelectorAll value?

let items = document.querySelectorAll(".clblue");
let filtered = Array.prototype.filter.call(items, function(node) {
    return node.classList.length === 1;
});

answered Oct 09 '19 at 11:16

Hubert Kubiak

607
1
7
30

It's a bit of a waste to do this. CSS selector expressions already handle this, no need to use a CSS selector expression badly, only to post-fix the result. – VLAZ Oct 09 '19 at 11:18
Ok, how would you use the css selectors in this case then? :) – Hubert Kubiak Oct 09 '19 at 11:20
Just like [the other answer shows](https://stackoverflow.com/questions/58302628/selecting-tag-with-a-specific-attributeonly/#58302672). – VLAZ Oct 09 '19 at 11:23
Ok, I didn't notice it. On the other hand, it is a bit less universal. It only applies to spans what of course may be fine if the author intends such behavior. My solution applies to any element with a given class. – Hubert Kubiak Oct 09 '19 at 11:26
Which you can still specify with a CSS selector `"[class='clblue']"` will match any element. Again, you are throwing away the CSS selector functionality to re-implement it. – VLAZ Oct 09 '19 at 11:28
Ok, I agree with you. – Hubert Kubiak Oct 09 '19 at 11:30

selecting tag with a specific attribute(only)

3 Answers3