Multiple classname selectors

[br441]

I'm trying to select only elements that have all of the specified classnames...

$results = Find-PupElements -Page $page -Selector ".w-full .text-left .rounded-lg .transition-all .duration-200 .border .group p-4 .text-gray-700 .hover:bg-gray-100 .border-gray-200 .hover:border-primary"

$results | ForEach-Object { $_.InnerHTML }

...yet I get this error...

Failed to execute 'querySelectorAll' on 'Document': '.w-full .text-left .rounded-lg .transition-all .duration-200 .border .group p-4 .text-gray-700 .hover:bg-gray-100 .border-gray-200 .hover:border-primary' is not a valid selector.

Is there a way to select multiple classnames?

[n7on]

This is a CSS selector syntax issue rather than a Pup limitation.

Spaces mean "descendant", not "element has all these classes" — so .a .b finds a .b nested inside an .a, not a single element with both classes. To require
all classes on the same element, chain them with no spaces:

.w-full.text-left.rounded-lg.transition-all

Tailwind's colon classes (e.g. hover:bg-gray-100) also need the : escaped with a backslash in CSS selectors:

Find-PupElements -Page $page -Selector
".w-full.text-left.rounded-lg.transition-all.duration-200.border.group.p-4.text-gray-700.hover:bg-gray-100.border-gray-200.hover:border-primary"