A Type Selector (sometimes referred to as an Element Type Selector) selects the element’s HTML tag.
p { /* "p" is the type selector */
margin: 0 0 1em 0;
}That’s great and all, but consider this: Do you actually want to select allof the <article> elements on the page? That’s what we’re doing when we select an element by its tag — any and all HTML elements matching that tag get the styles. We’ll discuss that in just a bit.
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 color: white on all tags would rarely be something of use on any site. This is because HTML 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 tag on any given page, so there are fewer opportunities for conflicts.
Type Selector Specificity 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 |