A Type Selector (sometimes referred to as an Element Type Selector) matches elements with the corresponding element node name, such as <p>, <span>, and <div> tags. Type selectors are generally used to make “broad stroke” changes to the style of a site.
p { /* "p" is the type selector */
margin: 0 0 1em 0;
}Common Usage
Often times Type Selectors are set as defaults, such as in a CSS reset where the intention is to override the browser defaults. An example from the first line of normalize.css, a popular CSS reset:
article, aside, details, figcaption, figure, footer, header,
main, nav, section, summary {
display: block;
}The Type Selectors above are setting the display property of those tags to block, so that any time any of those tags are used throughout the site they will display as block unless overwritten by a more specific style.
Best Practices
It is generally considered poor practice to apply fine detail changes with a Type Selector alone. For example, applying a “color: white” property blanketly to all <div> tags would rarely be something of use on any site. This is because <div> tags are generic and are used throughout sites for various purposes.
However, with a Type Selector such as body { }, setting a default font-size and line-height is common. This is due in part to the fact that there can only be one <body> tag on any given page, so there are fewer opportunities for conflicts.
Type Selector Specifity and Performance
Type Selectors are on the lowest level of the specificity cascade (generally written as 0, 0, 0, 1), meaning that almost anything will override the style applied via a Type Selector alone, and adding a Type Selector to a class or ID in your CSS provides minimal extra specificity.
Type Selectors also rank lower on the CSS efficiency scale than do classes and IDs. Therefore it is technically better performance choice to utilize a class or an ID rather than the more generic Type Selector (although the real speed difference is typically negligible).
Other Resources
- MDN
- CSS-Tricks Article on CSS efficiency
Browser Support
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Any | Any | Any | Any | Any | Any | Any |
