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

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Any Any Any Any Any Any Any

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment