CSS Element Selector

A selector is the part of a rule that says which elements to style. The simplest selector is just the name of an HTML tag. That is called an element selector, or a type selector.

1
2
3
4
5
6
7
8
9
10
11
12
13

<style>
  h2 {
    color: #d94a00;
  }
  p {
    line-height: 1.6;
    color: #333;
  }
</style>
<h2>Opening hours</h2>
<p>Monday to Friday, 9am to 6pm.</p>
<h2>Find us</h2>
<p>Second floor, above the bakery.</p>

The h2 rule turns every h2 orange. The p rule gives every paragraph more space between lines. You never had to touch the HTML.

When it is the right tool

Element selectors are great for setting a baseline for the whole site: how paragraphs, headings, links and lists look by default. They are a poor choice for styling one particular box, because they match everything of that type.

1
2
3
4

/* A sensible baseline */
body { font-family: system-ui, sans-serif; line-height: 1.6; }
a    { color: #b84624; }
img  { max-width: 100%; }

1
2

h2 { color: navy; }
li { font-size: 20px; }