CSS Element Type Selector — Selecting by Tag Name
Understand the CSS type selector that targets elements by their HTML tag name. Learn specificity, combining with other selectors, and when to use type selectors vs classes.
Detailed Explanation
CSS Element Type Selector
The type selector (also called tag selector or element selector) targets elements by their HTML tag name. It is one of the simplest CSS selectors available.
Syntax
h1 {
font-size: 2rem;
}
p {
line-height: 1.6;
}
a {
color: blue;
text-decoration: underline;
}
Specificity
A type selector has the lowest non-zero specificity: (0, 0, 1). Only the universal selector (*) has lower specificity at (0, 0, 0).
Combining Type Selectors
Type selectors are frequently combined with other selectors:
/* Type + Class */
a.button { } /* specificity: (0, 1, 1) */
/* Type + Attribute */
input[type="text"] { } /* specificity: (0, 1, 1) */
/* Type + Pseudo-class */
li:first-child { } /* specificity: (0, 1, 1) */
/* Type in Descendant */
nav a { } /* specificity: (0, 0, 2) */
When to Use Type Selectors
Type selectors are ideal for:
- Base typography styles (h1-h6, p, blockquote)
- Reset/normalize stylesheets
- Prose/article content where you style raw HTML
- Form element defaults (input, select, textarea, button)
When to Avoid
Avoid type selectors in component-based architectures where class selectors provide better encapsulation and avoid unintended style inheritance.
Use Case
Type selectors are fundamental to base stylesheets and CSS resets. Every web project uses them to establish default typography (h1-h6, p, a), form element appearance (input, button, select), and structural element styling (body, main, section). They form the lowest-specificity layer of a well-organized CSS architecture.