Starts-with and ends-with selectors in CSS - Performance & Optimization

Performance: Starts-with and ends-with selectors

MEDIUM IMPACT

These selectors affect how quickly the browser matches elements to styles during rendering.

Styling elements based on attribute prefixes or suffixes

CSS

.btn-primary { color: blue; } .active { font-weight: bold; }

Using simple class selectors lets the browser quickly match styles using fast lookup.

📈 Performance Gainstyle matching is near-instant, reducing LCP and improving responsiveness

Styling elements based on attribute prefixes or suffixes

CSS

[class^='btn-'] { color: blue; } [class$='-active'] { font-weight: bold; }

These selectors require the browser to check attribute values character-by-character for many elements, causing slower style matching.

📉 Performance Costtriggers slower style calculation on large DOMs, increasing LCP by tens of milliseconds

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
[attr^='value'] or [attr$='value']	Many attribute checks per element	0 (style only)	Low to medium (style recalculation)	[!] OK
.class or #id selectors	Fast direct lookup	0	Low	[OK] Good

Rendering Pipeline

Starts-with and ends-with selectors are evaluated during the Style Calculation stage, where the browser matches CSS rules to DOM elements by checking attribute values.

→Style Calculation

⚠️ BottleneckStyle Calculation is slower because attribute substring matching is more complex than simple class or ID matching.

Core Web Vital Affected

LCP

These selectors affect how quickly the browser matches elements to styles during rendering.

Optimization Tips

1Avoid overusing starts-with and ends-with selectors on large DOMs.

2Prefer simple class or ID selectors for faster style matching.

3Use DevTools Performance panel to spot slow style recalculations.

Performance Quiz - 3 Questions

Why can starts-with ([attr^='value']) selectors slow down page rendering?

A Because they increase the number of DOM nodes

B Because they require checking attribute values character-by-character for many elements

C Because they cause layout shifts

D Because they block network requests

DevTools: Performance

How to check: Record a performance profile while loading the page. Look for long Style Calculation times in the summary.

What to look for: High time spent in 'Style Recalculation' indicates expensive selectors like starts-with or ends-with.