[ANSWERED] How do I exclude or filter some of the elements collected by `querySelectorAll` method

Question

Assuming we have 10 buttons in some page, how do we exclude or prevent some of them from being collected by `querySelectorAll` method. Is there any specifier that I can use, maybe in the argument string passed during the call to the `querySelectorAll`?

Answer 1

sure Ore
https://code.sololearn.com/WAHyMY51HD7x/?ref=app

Answer 2

Depends on the criteria you want to filter the "some".
It can be filtered by specific attribute eg input[type="range"], button[disabled] or some pseudo element eg li:nth-child(2n+1)

Please read through the Mozilla doc, it explains most of the possibility on setting css parameters of querySelctorAll method.
If you know css well, it should not be an issue to use querySelctorAll.
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Answer 3

other way around Ore's solution is using :not pseudo class

ex. excluding any button with .bad class

button:not(.bad)

Answer 4

Ore , Calviղ and Taste
Thank you very much guys 🙏
I think the :not pseudo kinda be the thing that I was looking for : )

Answer 5

Give a class attribute to the elements you need. Afterwards you can use a class (.) selector to select what you need

Answer 6

Taste I am not aware that you can use pseudo selectors in vanilla js. Can you show me an example?

Answer 7

Ore JavaScript and querySelctorAll cannot access pseudo elements, but it can access pseudo class.

::before, ::after are pseudo elements, whereas :not, :focus, :active ... are pseudo class.