Element Selectors

CSS Element Selectors

A CSS element selector selects HTML elements by their element name. It is useful when you want the same style to apply to every matching element, such as all paragraphs, headings, or links on a page.

Element Selector Syntax

An element selector uses the name of an HTML element without angle brackets. The selector is followed by a pair of curly braces containing one or more CSS declarations.

p {
  color: blue;
}

In this example, p is the selector, color is the CSS property, and blue is the property value. The rule applies to every <p> element matched by the selector.

Do not include the HTML angle brackets in a CSS element selector.

/* Correct */
p {
  color: blue;
}

/* Incorrect */
<p> {
  color: blue;
}

Selecting Paragraphs

Using p as a selector targets the <p> elements in the document.

p {
  color: blue;
  font-size: 18px;
}

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

Both paragraphs match the p selector, so both receive the blue text color and 18px font size.

Selecting Headings

Heading elements can be selected in the same way. Each heading level has its own element name, from h1 through h6.

h2 {
  color: #0088cc;
}

<h2>First Heading</h2>
<p>This is a paragraph.</p>
<h2>Second Heading</h2>

The rule applies to both <h2> elements. It does not select the paragraph because the paragraph does not match the h2 selector.

Selecting Other HTML Elements

Most HTML elements can be used as element selectors. You simply use the element name as the CSS selector.

body {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  color: #333333;
}

p {
  line-height: 1.5;
}

strong {
  color: red;
}

Each rule targets a different type of HTML element. The body rule targets the <body> element, the h1 rule targets <h1> elements, the p rule targets <p> elements, and the strong rule targets <strong> elements.

How Many Elements Are Selected

An element selector is not limited to the first matching element. It selects every matching element within the selector's scope.

p {
  color: green;
}

<p>Paragraph one.</p>
<p>Paragraph two.</p>
<p>Paragraph three.</p>

All three paragraphs match the selector and receive the same text color. This makes element selectors useful for establishing consistent styles for a particular type of HTML element throughout a page.

When to Use Element Selectors

Element selectors work well when a style should apply broadly to a particular type of HTML element. For example, you might use them to establish the default appearance of paragraphs, headings, lists, or other elements across a page.

p {
  line-height: 1.6;
}

h2 {
  margin-top: 30px;
}

Sometimes you will want to style only certain elements rather than every element of that type. In those situations, a class selector is usually more appropriate. Class selectors are covered in the next tutorial.

Summary

CSS element selectors select HTML elements by their element name. A selector such as p targets paragraphs, while h2 targets second-level headings. The element name is written without the HTML angle brackets.

Element selectors are useful when the same style should apply to all matching elements. When only selected elements need a particular style, classes provide a more targeted approach.