The Element Selector

The Element Selector, also known as the Type Selector, is the most fundamental and least specific way to target elements in CSS.

It selects all instances of a specific HTML tag on your webpage. This selector is perfect for applying broad, default styles to common elements like paragraphs, headings, or list items.

How to Use the Element Selector

The syntax is straightforward: you simply use the name of the HTML tag as your selector.

The Syntax

Element Selector Syntax

tagname {
  /* declarations go here */
}

Examples

Selector	Targets
h1	All <h1> elements.
p	All <p> (paragraph) elements.
a	All <a> (anchor/link) elements.
li	All <li> (list item) elements.

Example Ruleset

This ruleset applies a base font size and margin to every paragraph on the page:

p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 1em;
}

h2 {
  color: #007bff;
  border-bottom: 2px solid #007bff;
  padding-bottom: 5px;
}

Specificity Score

The Element Selector has the lowest possible Specificity score (excluding the Universal Selector).

Selector Type	Specificity Score
Element/Type	(0, 0, 0, 1)

This low score means it is easily overridden by any other selector, such as a Class (score 10) or an ID (score 100). This is a desired trait, as element selectors are meant to provide the default base styles.

Base Styling

Always use the Element Selector for base styles or reset styles. For instance, setting a default font-family on the body tag, or setting margin: 0; on all p tags. This establishes a clean foundation that more specific rules can easily customize.

Interactive Element Selector Demo

In the live editor, the CSS targets the div and p elements. Notice how every instance of those tags is affected.