The element selector in CSS targets all HTML elements of a specific type. It applies the defined style rules to every instance of that HTML element on the page. This selector is also known as a type selector.

Key Features of Element Selector

1
Selects elements by their HTML tag name (e.g., div, p, h1).
2
Applies styles to all matching elements globally unless overridden.
3
Has low specificity compared to class or ID selectors.
4
Useful for setting default styles for common tags.

Example of Element Selector

Difficulty: 4/10

Topics: element selectors, specificity, performance

Scenario Questions

0-2 years experience

1
We have a simple HTML page with a <button> element. How would you write a CSS rule to make all buttons have a blue background using an element selector?
2
If you add a <button class='primary'> and also have a .primary { background: red; } rule, which background color will the button show and why?

2-5 years experience

1
You notice that a <nav> element isn’t picking up the styles you wrote with the nav { background: #333; } selector. What are possible reasons it’s not applying?
2
During a feature rollout, a teammate wrapped a <p> inside a <section>. Your existing p { margin: 0; } rule now behaves unexpectedly. How would you debug and decide whether to keep the element selector or switch to a class?

5-8 years experience

1
Our front‑end team is building a component library that must support theming and avoid CSS bloat. Discuss the trade‑offs of using element selectors versus class selectors for base styling in this context.
2
A page with thousands of DOM nodes is experiencing a noticeable render lag, and you suspect CSS selector performance. How would you evaluate the impact of element selectors and what mitigation strategies would you propose?

8+ years experience

1
We are migrating a legacy codebase that heavily relies on element selectors to a design system that enforces BEM naming. Outline a migration plan that minimizes visual regressions and maintains performance.
2
Cross‑team, we need to enforce a consistent visual hierarchy across many micro‑frontends. How would you set policies around element selectors to balance global defaults and team autonomy, and what tooling would you use to enforce them?

Follow-up Questions

❓Can you give an example where an element selector caused an unexpected style bleed?
❓How would you measure the performance impact of a selector in the browser?
❓What guidelines would you set for using element selectors in a large codebase?