4.4 CSS Selectors

Because we don’t want to style all our HTML elements at once, we need to be able to target a subset of these HTML elements.

CSS selectors define which elements we want our styling to be applied to.

Generic tag selectors

Targeting generic HTML tags is easy: just use the tag name.

a{ /* Links */ }
p{ /* Paragraphs */ }
ul{ /* Unordered lists */ }
li{ /* List items */ }

There’s a direct connection between the name of the HTML tag and the CSS selector used.

Classes

Considering we probably don’t want to style all paragraphs or all titles identically, we need to differentiate them.

Of all HTML attributes, the class attribute is the most important for CSS. It allows us to define a group of HTML elements that we can target specifically. Just put a dot . in front of the class name you want to use:

.date {
  color: red;
}

On one side, there is the HTML class attribute with the value date. It must match the name of the CSS class.

You can use any name for your CSS class, as long as it doesn’t start with a number.

The .date class selector will target all HTML elements that have the class="date" attribute. So, the following HTML elements will all be styled:

<p class="date">
  Saturday Feb 21
</p>
<p>
  The event will be on <em class="date">Saturday</em>.
</p>

Bear in mind that the tag name is irrelevant. Only the class HTML attribute is.

IDs

You can also use the id attribute in your HTML, and target it with a hash # in your CSS:

#tagline{ color: orange;}

<h1 id="tagline">This heading will be orange.</h1>

ID are similar to Classes, as they rely upon an HTML attribute.

Example

<p></p>

<div class="global"></div>

<ul id="menu">

<ol class="dico">
  <li>Un cobaye</li>
  <li>Des cobaux</li>
</ol>

Combining selectors

Let’s reuse our previous example where we want our dates to be red:

.date {
  color: red;
}

<p class="date">
  Saturday Feb 21
</p>
<p>
  The event will be on <em class="date">Saturday</em>.
</p>

What if we want our dates that are in em elements to blue instead? We can add the following CSS rule:

em.date {
  color: blue;
}

The em.date combines:

• a tag selector em
• a class selector .date

It will only apply to <em class="date"></em> HTML elements. It won’t affect other .date or em.

Hierarchy selectors

A space in a selector defines a ancestor/descendant relationship. Let’s say we want the links in our header to be in red:

header a {
  color: red;
}

This can be read from right to left as: “Select all a elements that are within a header element”. This will prevent all other links (that aren’t in the header) from being affected.

Pseudo-class selectors

HTML elements can have different states. The most common case is when you hover over a link. It’s possible in CSS to apply a different style when such an event occurs.

Pseudo-class selectors are attached to usual selectors and start with a colon ::

a {
  color: blue;
}

a:hover {
  color: red;
}