Learn web development

Simple selectors

In our first selectors article we'll learn about "simple" selectors, so-called because they directly match one or more elements of a document, based on the type of element (or its class or id.)

Type selectors aka element selectors

This selector is just a case-insensitive match between the selector name and a given HTML element name. This is the simplest way to target all elements of a given type. Let's take a look at an example:

Here is some HTML:

<p>What color do you like?</p>
<div>I like blue.</div>
<p>I prefer red!</p>

A simple style sheet:

/* All p elements are red */
p {
  color: red;
}
/* All div elements are blue */
div {
  color: blue;
}

And we get this:

Active learning: Selecting different elements

For this active learning, we'd like you to try changing the selector on the single CSS rule so that different elements in the example are styled. Do you know how to write a selector to apply the ruleset to multiple elements at once?

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see a potential answer.

Class selectors

The class selector consists of a dot, '.', followed by a class name. A class name is any value without spaces put within an HTML class attribute. It is up to you to choose a name for the class. It is also worth knowing that multiple elements in a document can have the same class value and a single element can have multiple class names separated by white space. Here's a quick example:

Here is some HTML:

<ul>
  <li class="first done">Create an HTML document</li>
  <li class="second done">Create a CSS style sheet</li>
  <li class="third">Link them all together</li>
</ul>

A simple style sheet:

/* The element with the class "first" is bolded */
.first {
  font-weight: bold;
}
/* All the elements with the class "done" are strike through */
.done {
  text-decoration: line-through;
}

And we get this result:

Active learning: Handling multiple classes

For this active learning, we'd like you to try changing the class attributes on the paragraph elements so that you can apply multiple separate effects. Try applying a base-box class plus a role class (editor-note or warning), and optionally important if you want to give the box strong importance. Think about how this kind of rule set allows you to build up a modular system of styles.

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see a potential answer.

ID selectors

The ID selector consists of a hash/pound symbol (#), followed by the ID name of a given element. Any element can have a unique ID name set with the id attribute. It is up to you what name you choose for the ID. It's the most efficient way to select a single element.

Important: An ID name must be unique in the document. Behaviors regarding duplicated IDs are unpredictable, for example in some browsers only the first instance is counted, and the rest are ignored.

Let's look at a quick example — here is some HTML:

<p id="polite"> — "Good morning."</p>
<p id="rude"> — "Go away!"</p>

A simple style sheet:

#polite {
  font-family: cursive;
}
#rude {
  font-family: monospace;
  text-transform: uppercase;
}

And we get this as an output:

Active learning: assigning the winner's colors with IDs

For this active learning, we'd like you to give the winner, second and third place in the competition an appropriate gold, silver and bronze color by giving CSS rules 2–4 appropriate selectors that select the relevant elements based on their ID.

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see a potential answer.

Universal selector

The universal selector (*) is the ultimate joker. It allows selecting all elements in a page. As it is rarely useful to apply a style to every element on a page, it is often used in combination with other selectors (see Combinators below.)

Important: Careful when using the universal selector. As it applies to all elements, using it in large web pages can have a perceptible impact on performance: web pages can be displayed slower than expected. There are not many instances where you'd want to use this selector.

Now for an example; first some HTML:

<div>
  <p>I think the containing box just needed
  a <strong>border</strong> or <em>something</em>,
  but this is getting <strong>out of hand</strong>!</p>
</div>

And a simple style sheet:

* {
  padding: 5px;
  border: 1px solid black;
  background: rgba(255,0,0,0.25)
}

Together, these give the following result:

Combinators

In CSS, combinators allow you to combine multiple selectors together, which allows you to select elements inside other elements, or adjacent to other elements. The four available types are:

  • The descendant selector —  (space) — allows you to select an element nested somewhere inside another element (not necessarily a direct descendant; it could be a grandchild, for example)
  • The child selector — > — allows you to select an element that is an immediate child of another element.
  • The adjacent sibling selector — + — allows you to select an element that is an immediate sibling of another element (i.e. right next to it, at the same level in the hierarchy).
  • The general sibling selector — ~ — allows you to select any elements that are siblings of another element (i.e. at the same level in the hierarchy, but not necessarily right next to it).

Here is a quick example to show you how these work:

<section>
  <h2>Heading 1</h2>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <div>
    <h2>Heading 2</h2>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
  </div>
</section>
section p {
  color: blue;
}
section > p {
  background-color: yellow;
}
h2 + p {
  text-transform: uppercase;
}
h2 ~ p {
  border: 1px dashed black;
}

The CSS styles the HTML as shown below:

The selectors work like so:

  • section p selects all the <p> elements — both the first two that are direct children of the <section> element, and the second two that are grandchildren of the <section> element (they are inside the <div> as well). All the paragraph text is therefore colored blue.
  • section > p selects only the first two <p> elements, which are direct children of the <section> element (but not the second two, which are not direct children). Only the first two paragraphs therefore have a yellow background color.
  • h2 + p selects only <p> elements that come directly after <h2> elements on the same hierarchy level — in this case the first and third paragraphs. These ones therefore have text all in uppercase.
  • h2 ~ p selects any <p> elements on the same hierarchy level as (and coming after) <h2> elements — in this case all the paragraphs. All of them therefore have a dashed border.

In the next article

Well done for reaching the end of our first selectors tutorial! I hope you found your first play with selectors fun — now we've looked at the simple core selectors we'll use most commonly, let's start looking at some more advanced features, starting with Attribute selectors.

 

Document Tags and Contributors

Tags: 
 Contributors to this page: cumanacr, mike706574, chrisdavidmills, lvnam96
 Last updated by: cumanacr,