-1
<div class="alpha">
   <div class="beta">
      <label style="color:red; font-size: 12px;">Hello</label>
   </div>
</div>

I want to exclude (= not include), the above label. This includes it (tested successfully):

document.querySelectorAll(.alpha .beta label");

Now how to exclude it? I want to select all my label class but this one I want to exclude only has a label style .

paros
  • 19
  • 1
  • 4
  • 1
    `document.querySelectorAll("div:not(.alpha .beta label)");` this makes no sense, cause you are saying "Select div, but not label". Label is not a div to begin with, – azrahel Sep 15 '18 at 20:19
  • Which elements *do* you want to include? – Bergi Sep 15 '18 at 20:20
  • You cannot have a complex selector (i.e. a "path" over multiple levels) as the argument to `:not()` – Bergi Sep 15 '18 at 20:25
  • 1
    Unfortunately [there is no css parent selector](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector). Seems like you want label whose parents do not contain `.beta, .alpha` in that order. – Salman A Sep 15 '18 at 20:30
  • @paros Not really, you just removed information :-) Still, *from what* do you want to exclude it? Do you want to select "all nodes" (`*`) except this label? Or something more specific? – Bergi Sep 15 '18 at 20:33
  • @paros check my answer now, it will include **everything** except what you dont want :). You should have used `*` (wild card) – azrahel Sep 15 '18 at 20:33
  • You've only told us what you *don't* want. It's like handing someone a grocery list that just says *"Not Carrots"*. Do you want *everything on the page* except `label`? – Tyler Roper Sep 15 '18 at 20:38
  • @TylerRoper - sorry, I want to select `label` but not the one mentioned. All my other labels are `label class`. – paros Sep 15 '18 at 20:43
  • @Bergi - hopefully now... – paros Sep 15 '18 at 20:51
  • 1
    @paros If i'm understanding correctly, you could do `document.querySelectorAll("label[class]")` - this only selects labels that have a `class` attribute. [**Example**](http://jsfiddle.net/3pozw9bL/2/) – Tyler Roper Sep 15 '18 at 21:05
  • @TylerRoper - This code following INCLUDES the `label` from my above example... `document.querySelectorAll(.alpha .beta label");`, now the question how to EXCLUDE this same `label`. Sorry for the confusion. Please refer to my example, because I have only a `label style`, there is NO `label class`. – paros Sep 16 '18 at 20:25
  • This is only getting more and more confusing. Your question: *"I want to select all my `label class`"*, a comment from one of the answers: *"All my other labels are `label class`"*, your most recent comment: *"there is NO `label class`"*. And still, you haven't told us what you want to exclude from. Please, please, just answer this one simple question: What *DO* you want to select? What is your desired set of elements? – Tyler Roper Sep 16 '18 at 21:07

2 Answers2

2

You cannot use CSS selectors to match "all labels except the one contained in div.alpha div.beta". However, you gave an alternative definition of your expected results:

I want to select all my <label class=…> but this one I want to exclude only has a <label style=…>.

You can do that using an attribute selector:

document.querySelectorAll("label[class]:not([style])")
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • "all labels except the one contained in div.alpha div.beta" has nothing to do with a parent selector, since it's not the ancestors being targeted in this case. It is due to `label:not(.alpha .beta *)` not being valid and supported until Selectors 4. See [this answer](https://stackoverflow.com/questions/31268382/css-selector-for-something-not-inside-something-else/31271265#31271265) and the ones linked therein. – BoltClock Sep 15 '18 at 23:23
  • @BoltClock You're right, that's a better link. But I thought Selectors 4 still only allow compound selectors, not complex ones? – Bergi Sep 16 '18 at 08:11
  • They removed that restriction a few years ago. That selector will work on Safari, for example. – BoltClock Sep 16 '18 at 08:11
1

Try this:

document.querySelectorAll("*:not(.div_label):not(.alpha):not(.beta)");

You don't need that last 'label' part, as label is not a div (and you are asking for div to get selected, right?), so it wont get selected anyway

azrahel
  • 1,143
  • 2
  • 13
  • 31
  • sorry, I want to select `label` but not the one mentioned. All my other labels are `label class` – paros Sep 15 '18 at 20:44