-1

I am trying to retrieve all DOM elements that match the following CSS selector using querySelectorAll():

let selector = 'div.group.w-ful.text-gray-800.dark:text-gray-100.border-b.border-black/10.dark:border-gray-900/50.dark:bg-gray-800 > div.text-gray-400.flex.self-end.lg:self-center.justify-center.mt-2.gap-2.md:gap-3.lg:gap-1.lg:absolute.lg:top-0.lg:translate-x-full.lg:right-0.lg:mt-0.lg:pl-2.visible';
let containerArray = document.querySelectorAll(selector);

However, when I run this code in the console, I get the following error:

1562:1 Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': 'div.group.w-ful.text-gray-800.dark:text-gray-100.border-b.border-black/10.dark:border-gray-900/50.dark:bg-gray-800 > div.text-gray-400.flex.self-end.lg:self-center.justify-center.mt-2.gap-2.md:gap-3.lg:gap-1.lg:absolute.lg:top-0.lg:translate-x-full.lg:right-0.lg:mt-0.lg:pl-2.visible' is not a valid selector.
    at <anonymous>:1:10

I'm not sure why this CSS selector is invalid. Can someone explain what's wrong with it and how I can fix it to make my querySelectorAll() work on the DOM?

Edit: I found out that : is an invalid character in CSS selectors. Escaping it with \ only does not work either. Invalid characters must be escaped with \\ in order to work with TailwindCSS classnames in .querySelectorAll():

let selector = 'div.group.w-ful.text-gray-800.dark\\:text-gray-100.border-b.border-black\\/10.dark\\:border-gray-900\\/50.dark\\:bg-gray-800 > div.text-gray-400.flex.self-end.lg\\:self-center.justify-center.mt-2.gap-2.md\\:gap-3.lg\\:gap-1.lg\\:absolute.lg\\:top-0.lg\\:translate-x-full.lg\\:right-0.lg\\:mt-0.lg\\:pl-2.visible';

This seems to work!

gradient_dissent
  • 9
  • 3
  • 1
    CSS doesn’t have a `:text-gray-100` pseudo-class (or a bunch of other psuedo-classes you seem to have made up). – Quentin Apr 23 '23 at 09:26
  • The web page uses tailwindcss. Nothing made up. Follow up for you @Quentin, how do I deal with pseudo-classes in CSS selectors? – gradient_dissent Apr 23 '23 at 09:33
  • You deal with psuedo-classes in CSS selectors by only using [real ones](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). – Quentin Apr 23 '23 at 09:40
  • @Quentin I understand what you mean, however, TailwindCSS is being adopted more and more across the web and your comment did not add any value to this question or its answer. I edited the question to show what will work. Keep your comments off the sassy end next time and just tell me that invalid characters have to be escaped in order to use them in CSS selectors. Cheers! – gradient_dissent Apr 23 '23 at 10:20
  • Tailwind CSS appears to be an awful pre-written stylesheet that seem to be focused on making the `class` attribute act like the `style` attribute. It completely misses the point of CSS. You have also completely missed the point of my comment — you **don't** have psuedo-classes, you have classes with `:` characters in the names. That's very different. It would have been clearer if you had provided a [mcve] (i.e. included some HTML in the question). – Quentin Apr 23 '23 at 11:30
  • Duplicate: https://stackoverflow.com/questions/32273188/css-classes-with-special-characters – Quentin Apr 23 '23 at 11:31

1 Answers1

0

TailwindCSS class names make use of characters that aren't valid in CSS selectors. While this eases development, it leads to "not a valid selector" errors if not handled correctly.

When trying to use querySelectorAll() with CSS selectors including TailwindCSS classes, make sure to escape :, / and other invalid characters by prepending \\ to each of them.

gradient_dissent
  • 9
  • 3
  • Designing a selector that doesn't depend on using badly named classes *or* a really **excessive number** of classes would be a better approach. – Quentin Apr 23 '23 at 11:31