amruthpillai/reactive-resume · error · Error

:nth-of-type does not accept an of selector.

Error message

:nth-of-type does not accept an of selector.

What it means

Thrown by compileNth when :nth-of-type is given an 'of <selector>' argument. Unlike :nth-child, :nth-of-type filters by element kind internally and the Selectors Level 4 'of' syntax is disallowed for it in this compiler.

Source

Thrown at packages/resume/src/stylesheet/selector.ts:173

	if (expression.type === "Identifier") {
		const keyword = astName(expression).toLowerCase();
		if (keyword === "odd") {
			a = 2;
			b = 1;
		} else if (keyword === "even") {
			a = 2;
		} else {
			throw new Error(`Unsupported :${name} expression.`);
		}
	} else if (expression.type === "AnPlusB") {
		a = expression.a === null || expression.a === undefined ? 0 : Number(expression.a);
		b = expression.b === null || expression.b === undefined ? 0 : Number(expression.b);
		if (!Number.isInteger(a) || !Number.isInteger(b)) throw new Error(`Invalid :${name} expression.`);
	} else {
		throw new Error(`Unsupported :${name} expression.`);
	}

	if (name === "nth-of-type" && nth[0].selector) throw new Error(":nth-of-type does not accept an of selector.");
	const of = nth[0].selector ? compileSelectorList(nth[0].selector, { depth: context.depth + 1 }) : undefined;
	return { type: "pseudo", name, a, b, ...(of ? { of } : {}) };
}

function compileSimple(node: SelectorAst, context: CompileContext): CompiledSimpleSelector | null {
	switch (node.type) {
		case "TypeSelector": {
			const name = astName(node);
			if (name === "*") return { type: "universal" };
			if (!knownKinds.has(name)) throw new Error(`Unknown semantic element ${name}.`);
			return { type: "type", name: name as SemanticNode["kind"] };
		}
		case "IdSelector":
			return { type: "id", value: astName(node) };
		case "AttributeSelector": {
			const name = astName(node);
			if (!knownAttributes.has(name)) throw new Error(`Unknown semantic attribute ${name}.`);
			if (node.flags) throw new Error("Attribute selector flags are not supported.");

View on GitHub (pinned to 3a5b12e2a4)

Solutions

1. Remove the 'of' clause: :nth-of-type(2).
2. If you need the of-filter semantics, use :nth-child(2 of <selector>) instead.
3. Filter by type via a surrounding compound rather than the of syntax.

Example fix

// before
item:nth-of-type(2 of .featured)
// after
item:nth-child(2 of [role~='nested-role'])

const NTH_OF_TYPE_HAS_NO_OF = !/:nth-of-type\([^)]*\bof\b/.test(selector);
// reject :nth-of-type(... of ...) before compiling

const isRejected = (r) => r.selector === null && typeof r.error === 'string';

const result = compileSelector(selector);
if (result.selector === null && result.error === ':nth-of-type does not accept an of selector.') {
  rewriteToNthChildOf(selector);
}

When it happens

Trigger: Writing :nth-of-type(2 of section) or any :nth-of-type(... of ...).

Common situations: Porting a :nth-child(... of ...) pattern to :nth-of-type; assuming symmetry between the two nth pseudo-classes.

Related errors

• :${name} requires one An+B expression.
• Unsupported :${name} expression.
• Invalid :${name} expression.
• :${name} does not accept arguments.
• Selector function nesting is too deep.

AI-assisted analysis of amruthpillai/reactive-resume@3a5b12e2a4 (2026-08-12). Data as JSON: /api/errors/9780ec2be82fc135. Report an issue: GitHub.