Using Selectors

Take a look at the HTML provided to you. You should notice that our div elements look a bit different to what we’ve seen before. They all have classes and ids:

<div class="first-row" id="box-1">
  <p>Box 1</p>
</div>
<div class="first-row" id="box-2">
  <p>Box 2</p>
</div>
<div class="second-row" id="box-3">
  <p>Box 3</p>
</div>
<div class="second-row" id="box-4">
  <p>Box 4</p>
</div>

We’ll use type, class and ID selectors to change the colour of different elements on the page.

Type Selectors

First, let’s change the colour of the text. We can use a type selector to do this. By referencing the p tag, we can change the colour of all text in a p tag. Add the following to your css:

/* Your CSS here */

body {
  background-color: orange;
}

+p {
+  color: blue;
+}

The text should now be blue.

ID Selectors

Each box has a unique id, which means that we can reference each box individually.

Let’s try changing the background colour of box-1 only:

/* Your CSS here */


body {
  background-color: orange;
}

p {
  color: blue;
}

+#box-1 {
+  background-color: hotpink;
+}

The top left box should now be pink.

Notice that we used a # before box-1, that tells our CSS that we are looking for an ID.

Class Selectors

The top two boxes have the first-row class, and the bottom two boxes have the bottom-row class. This means that we could use these classes to reference each row individually, i.e. two boxes at a time.

Let’s try changing the background colour of the two boxes in the bottom row:

/* Your CSS here */

body {
  background-color: orange;
}

p {
  color: blue;
}

#box-1 {
  background-color: hotpink;
}

+.second-row {
+  background-color: yellow;
+}

The bottom boxes should now be yellow.

Notice that we used a . before second-row, that tells our CSS that we are looking for a class.

This should be the final result:

Try changing the background colour of box 2 only.