Element Selectors

On This Page

The Syntax

Styling Every Paragraph and Heading

Where the Element Sits Does Not Matter

Selecting an Element Can Also Change Its Children

When to Use Element Selectors

A rule that starts with the name of an HTML element, such as p or h1, styles every element of that kind on the page. This kind of selector is called an element selector. The CSS specifications call it a type selector, and you will see both names in documentation.

Every lesson in this chapter styles the same small page: a beginner's hiking guide with a heading, a few paragraphs and a packing list. Each lesson adds one kind of selector to it, so you can see how the selectors work together.

The Syntax

An element selector is the element's name with nothing in front of it. The declarations inside the braces apply to every element with that name.

p {
  color: #333333;
  font-size: 18px;
}

The selector does not include the angle brackets. You write p, not <p>.

Styling Every Paragraph and Heading

Here is the full page. Copy it into a file and open it in a browser to follow along.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hiking Guide</title>
  <style>
    h1 {
      color: darkgreen;
      margin-bottom: 8px;
    }

    p {
      color: #333333;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>A Beginner's Hiking Guide</h1>
  <p>Pick a short trail for your first walk.</p>
  <p>Carry more water than you think you need.</p>
  <ul>
    <li>Water</li>
    <li>Map</li>
    <li>Rain jacket</li>
  </ul>
  <div>
    <p>Check the weather the night before.</p>
  </div>
</body>
</html>

The browser reads the selector p and then checks every element on the page. Each element whose name is p receives the two declarations, and every other element is skipped. The margin-bottom declaration on the heading sets the space below it; a later chapter explains margins in detail.

These are the computed values the browser reported for this page:

h1                    color rgb(0, 100, 0)     font-size 32px
p (first)             color rgb(51, 51, 51)    font-size 18px
p (second)            color rgb(51, 51, 51)    font-size 18px
li (all three)        color rgb(0, 0, 0)       font-size 16px
p (inside the div)    color rgb(51, 51, 51)    font-size 18px

The heading keeps its default size of 32px because the h1 rule does not set a size. The list items keep the default 16px because no rule selects them.

Where the Element Sits Does Not Matter

The third paragraph sits inside a <div>, yet it is styled like the other two. An element selector matches by name only, so it finds an element at any depth on the page. On this page, p matches three elements.

The selector p matches all three paragraphs in the page tree, including the one nested inside the div.

In the tree above, notice that the selector ignores the parent of each paragraph. Only the element's name decides whether it matches.

In an HTML page, element names in selectors are not case-sensitive. A rule written as P matches the same three paragraphs as p. Lowercase is the usual convention, and it matches the way HTML is normally written.

Selecting an Element Can Also Change Its Children

Suppose you add a rule for the list itself instead of its items.

ul {
  color: steelblue;
  border: 1px solid steelblue;
}

The rule selects only the <ul> element, so only the list gets the border. However, the text of all three <li> items also turns steel blue, rgb(70, 130, 180). Some properties, such as color and font-size, pass from an element to the elements inside it. This behavior is called inheritance. Other properties, such as border and margin, do not pass down, which is why the list items have no border of their own.

Keep the two ideas separate. A selector decides which elements a rule matches, while inheritance decides which values those elements then pass to their children.

When to Use Element Selectors

Element selectors suit the default look of a page: the font size of every paragraph, the color of every heading, and the spacing of every list. They are short, and they need no changes to the HTML.

Their cost is that they cannot tell two elements of the same kind apart. If one paragraph needs a warning style, a p rule would also change every other paragraph on the page. Class selectors solve that problem, and the next lesson adds them to this page.

Mark as Completed

Reading Progress

Vote for new content

On This Page

The Syntax

Styling Every Paragraph and Heading

Where the Element Sits Does Not Matter

Selecting an Element Can Also Change Its Children

When to Use Element Selectors