Which CSS Selectors Are Fastest? Ranking Performance from ID to Universal

CSS selector performance ranking (from fastest):

#id (ID selector)

.class (class selector)

div (type selector)

a + i (adjacent sibling selector)

ul > li (child selector)

* (universal selector)

input[type="text"] (attribute selector)

a:hover (pseudo‑class/element selector)

Browsers evaluate selectors from right to left, so the rightmost part should be the fastest.

Examples of inefficient selectors:

div * { /* bad */ }

.list li { /* bad */ }

Better selectors:

.list-item { /* good */ }

#list .list-item { /* good */ }