Selector Performance
Browsers match selectors right to left. Deep, universal, or attribute selectors can slow large pages. Keep selectors short and specific.
CSS
Intermediate
3 min read
Selector Performance
Example
/* Slow: universal + attribute + deep descendant */
* [type="text"] .form-group > input { border: 1px solid red; }
/* Fast: single class */
.input-error { border: 1px solid red; }
/* Avoid deep nesting */
.nav .list .item .link .icon { color: blue; }
/* Better */
.nav-icon { color: blue; } Pro Tip
CSS selector performance rarely matters except on pages with thousands of elements and continuous repaints.