A type selector, also called a tag selector, matches elements by their HTML element name, such as body, h1, or a. It is useful for establishing default styles across an interface. section 1.1.3 section 8.2.3
Use type selectors with these principles in mind:
- Treat type selectors as less specific than class selectors and ID selectors. section 1.1.3
- Remember that several tag names do not automatically outweigh a class: html body header h1 has specificity 0,0,4, while .page-header .title has 0,2,0. section 1.1.3
- Prefer type selectors for broad defaults, such as body, headings, links, form controls, and other recurring element styles. section 8.2.3
Global defaults with type selectors
A global layer can use body and h1 to establish site-wide typography and colors, while a media query adjusts heading sizes for wider viewports. More targeted selectors can override these defaults when needed. section 8.2.3
Table 1.1 Various selectors and their corresponding specificities
|
Selector
|
IDs
|
Classes
|
Tags
|
Notation
|
|---|---|---|---|---|
html body header h1
|
0
|
0
|
4
|
0,0,4
|
body header.page-header h1
|
0
|
1
|
3
|
0,1,3
|
.page-header .title
|
0
|
2
|
0
|
0,2,0
|
#page-title
|
1
|
0
|
0
|
1,0,0
|
Compare type selectors with class and ID selectors by counting IDs, classes, and tags in each specificity value. section 1.1.3
