CSS Selectors

There are two parts to CSS: selectors and declarations. We’ll just focus on selectors for now. The selector tells the webpage which part of the page to apply the styles (declarations) to.

There are three different kinds of selectors:

Tag
ID
Class

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:

Before - Replace this code

/* Your CSS here */

body {
  background-color: orange;
}

After - Updated code

/* Your CSS here */

body {
  background-color: orange;
}

p {
  color: blue;
}

Test

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:

Before - Replace this code

/* Your CSS here */


body {
  background-color: orange;
}

p {
  color: blue;
}

After - Updated code

/* Your CSS here */


body {
  background-color: orange;
}

p {
  color: blue;
}

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

Test

The top left box should now be pink.

Tip

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:

Before - Replace this code

/* Your CSS here */

body {
  background-color: orange;
}

p {
  color: blue;
}

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

After - Updated code

/* Your CSS here */

body {
  background-color: orange;
}

p {
  color: blue;
}

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

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

Test

The bottom boxes should now be yellow.

Tip

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:

Challenge!

Try changing the background colour of box 2 only.