CSS Type Selector

The CSS type selector selects HTML elements by their element name. It can be used to apply the same CSS declarations to every matching element in a document, such as all paragraphs, headings, links, or list items.

Syntax

A type selector is written using the name of the HTML element you want to select:

element {
  property: value;
}

For example, the following selector matches every <p> element:

p {
  color: #0088cc;
}

How the Type Selector Works

The type selector matches elements according to their element name. When a CSS rule uses p as its selector, every matching <p> element is selected unless other selector conditions narrow the match.

h2 {
  color: #0088cc;
}
p {
  line-height: 1.6;
}
a {
  text-decoration: underline;
}

These rules select all <h2>, <p>, and <a> elements respectively.

Type Selector Examples

A type selector can be used with any HTML element that can be selected with CSS.

body {
  font-family: Arial, Helvetica, sans-serif;
}
h1 {
  color: #0088cc;
}
p {
  margin-bottom: 16px;
}
img {
  max-width: 100%;
}

Each selector applies its declarations to every matching element in the document.

Combining with Other Selectors

A type selector can be combined with classes, attributes, pseudo-classes, and other selectors to create a more specific match.

p.intro {
  font-weight: bold;
}
a[target="_blank"] {
  color: #0088cc;
}
li:first-child {
  font-weight: bold;
}

The first example selects <p> elements with the intro class. The second selects <a> elements with a target attribute equal to _blank. The third selects an <li> element when it matches the :first-child pseudo-class.

Specificity

A type selector contributes 0-0-1 to a selector's specificity. Each type selector in a compound or complex selector contributes to the type column of the specificity value.

Selector	Specificity
`p`	`0-0-1`
`p.intro`	`0-1-1`
`article p`	`0-0-2`
`#content p`	`1-0-1`

Type selectors have lower specificity than class selectors and ID selectors. When competing declarations have the same origin, importance, and cascade layer, specificity can help determine which declaration takes precedence.

Type Selector Example

The following example uses the p type selector to style every paragraph. The <div> element is not affected because it does not match the selector.

p {
  color: #0088cc;
  font-weight: 600;
}

Play in Editor

Other basic CSS selectors can select elements using classes, IDs, or all element types:

Specifications

The type selector is defined in the Selectors Level 4 specification.

CSS Type Selector