Selectors

A selector defines which elements a rule applies to. The more precisely you can pick elements, the fewer extra classes you have to add to the markup.

Tag selector

The simplest selector is a tag name. It picks every element of that kind on the page:

<style>
  li {
    color: teal;
  }
</style>
 
<ul>
  <li>Bread</li>
  <li>Milk</li>
</ul>

The asterisk * is the universal selector: it picks every element there is. It is used rarely, for example to set a common rule for the whole page.

Classes

To style only some paragraphs rather than all of them, give them a class — the class attribute with a name you make up. A class selector starts with a dot:

<style>
  .note {
    background: lightyellow;
  }
</style>
 
<p class="note">A paragraph with the note class.</p>
<p>A regular paragraph.</p>

One class can be given to many elements, and one element can have several classes separated by spaces: class="note big". Classes are the main styling tool.

The id selector

The id attribute is a unique name of an element: only one element on the page may have a given value. An id selector starts with a hash:

<style>
  #main-title {
    color: royalblue;
  }
</style>
 
<h2 id="main-title">A heading with an id</h2>
<h2>Another heading</h2>

Ids are rarely used for styling: the style cannot be reused on another element. More often an id is needed for anchor links and scripts.

Several selectors at once

One rule can apply to different elements if you list the selectors separated by commas. This is called grouping:

<style>
  h3, .accent {
    color: darkorange;
  }
</style>
 
<h3>A heading</h3>
<p class="accent">A paragraph of the same color.</p>

If you write selectors together with no space, you get a refinement: p.accent picks only paragraphs with the accent class.

Nesting

Selectors separated by a space pick elements inside another element at any depth. The > sign limits the choice to direct children — elements that sit immediately inside:

<style>
  .menu a { color: seagreen; }
</style>
 
<nav class="menu">
  <a href="#">A link in the menu</a>
</nav>
<a href="#">A link outside the menu</a>

Nesting saves you from extra classes: there is no need to give a class to every menu link.

Attribute selector

Square brackets let you name an attribute and its value:

<style>
  a[target="_blank"] { color: darkorange; }
</style>
 
<p><a href="#" target="_blank">Opens in a new tab</a></p>
<p><a href="#">A regular link</a></p>

Common mistake

People forget the dot in a class selector. The browser then looks for a tag with that name, finds none, and the rule changes nothing:

<style>
  note { color: crimson; }
  .price { color: seagreen; }
</style>
 
<p class="note">No dot: the style was not applied.</p>
<p class="price">With a dot: green text.</p>

The dot is needed only in CSS — you do not write it in the class attribute.