feat: [#990] Add support for multiple selectors in ":not" pseudo-class (

#1751) Co-authored-by: David Ortner <david@ortner.se>
capricorn86 · Mar 4, 2025 · 6f7057d · 6f7057d
1 parent 6dae379
commit 6f7057d
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git a/packages/happy-dom/src/query-selector/SelectorItem.ts b/packages/happy-dom/src/query-selector/SelectorItem.ts
@@ -248,7 +248,12 @@ export default class SelectorItem {
 			case 'root':
 				return element[PropertySymbol.tagName] === 'HTML' ? { priorityWeight: 10 } : null;
 			case 'not':
-				return !pseudo.selectorItems[0].match(element) ? { priorityWeight: 10 } : null;
+				for (const selectorItem of pseudo.selectorItems) {
+					if (selectorItem.match(element)) {
+						return null;
+					}
+				}
+				return { priorityWeight: 10 };
 			case 'nth-child':
 				let nthChildIndex = -1;
 				if (pseudo.selectorItems[0] && !pseudo.selectorItems[0].match(element)) {

diff --git a/packages/happy-dom/src/query-selector/SelectorParser.ts b/packages/happy-dom/src/query-selector/SelectorParser.ts
@@ -316,10 +316,14 @@ export default class SelectorParser {
 					nthFunction: this.getPseudoNthFunction(args)
 				};
 			case 'not':
+				const notSelectorItems = [];
+				for (const group of this.getSelectorGroups(args, options)) {
+					notSelectorItems.push(group[0]);
+				}
 				return {
 					name: lowerName,
 					arguments: args,
-					selectorItems: [this.getSelectorItem(args, options)],
+					selectorItems: notSelectorItems,
 					nthFunction: null
 				};
 			case 'is':

diff --git a/packages/happy-dom/test/query-selector/QuerySelector.test.ts b/packages/happy-dom/test/query-selector/QuerySelector.test.ts
@@ -901,6 +901,20 @@ describe('QuerySelector', () => {
 			expect(elements[0] === container.children[1]).toBe(true);
 		});
 
+		it('Supports :not with multiple selectors within', () => {
+			const container = document.createElement('div');
+			container.innerHTML = `<ul class="list">
+				<li class="list-item"></li>
+				<li class="list-item"></li>
+				<li class="list-item"></li>
+				<li class="other-item"></li>
+				<li></li>
+			</ul>`;
+
+			const lastItem = container.querySelectorAll('ul > li:not(.list-item, .other-item)');
+			expect(lastItem.length).toBe(1);
+		});
+
 		it('Returns all elements matching ".bar:not(.foo)".', () => {
 			const container = document.createElement('div');
 			container.innerHTML = `