Grow your CSS skills. Land your dream job.

Type

Last updated on:

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

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".