Type

Last updated on:
March 7, 2014

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:

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).

Treehouse is where you go to learn HTML, CSS, and how to build iOS apps. It's a complete education in modern web and app technology, designed to get you ready for a hot new job or to kickstart your own business.

The Lodge is a member login only area with access to video training on how to build websites from scratch using the best modern tools.

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.