Web Development Lesson 3 - Tables

Selectors

Objective

In this activity, we'll look at selectors, which allow you more control over what CSS rules are applied to.

Setup

We'll build on previous work in this activity using your 'tables.html' and 'style.css'. Here's the code again.

tables.html

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Surname</th>
      <th>Nationality</th>
      <th>Age</th>
      <th>Position</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>David</td>
      <td>Ospina Ramírez</td>
      <td>Colombia</td>
      <td>33</td>
      <td>Portero</td>
    </tr>
    <tr>
      <td>Carlos</td>
      <td>Eccehomo Cuesta Figueroa</td>
      <td>Colombia</td>
      <td>22</td>
      <td>Defensa</td>
    </tr>
    <tr>
      <td>Juan Guillermo</td>
      <td>Cuadrado Bello</td>
      <td>Colombia</td>
      <td>33</td>
      <td>Centrocampista</td>
    </tr>
    <tr>
      <td>Radamel Falcao</td>
      <td>García Zárate</td>
      <td>Colombia</td>
      <td>35</td>
      <td>Delantero</td>
    </tr>
  </tbody>
</table>

style.css

td, th {
  border-width: 1px;
  border-style: solid;
}

td {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}

table {
  border-collapse: collapse;
}

ID

You may have noticed that using styles in HTML lets you change a single element, while using CSS lets you change all associated elements, but what if you want to change just certain elements?
To do this we use selectors, which identify the specific elements you want to treat differently.
The first of these is id which identifies one single element in the page. It must be unique.
Let's highlight the data for Carlos in yellow.
First, we need to specify the row, but giving it an id. Let's call it 'carlos'.

    <tr id="carlos">
      <td>Carlos</td>

Now we can apply a rule to this row with CSS using #.

#carlos {
  font-style: italic;
}

Now the <tr> and all elements inside it are italicised.

Class

Say we want to highlight the age of every player, We can't use id because that must be unique.
Instead, we apply a class to every element we want to change. Let's call it 'age'.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Surname</th>
      <th>Nationality</th>
      <th class="age">Age</th>
      <th>Position</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>David</td>
      <td>Ospina Ramírez</td>
      <td>Colombia</td>
      <td class="age">33</td>
      <td>Portero</td>
    </tr>
    <tr id="carlos">
      <td>Carlos</td>
      <td>Eccehomo Cuesta Figueroa</td>
      <td>Colombia</td>
      <td class="age">22</td>
      <td>Defensa</td>
    </tr>
    <tr>
      <td>Juan Guillermo</td>
      <td>Cuadrado Bello</td>
      <td>Colombia</td>
      <td class="age">33</td>
      <td>Centrocampista</td>
    </tr>
    <tr>
      <td>Radamel Falcao</td>
      <td>García Zárate</td>
      <td>Colombia</td>
      <td class="age">35</td>
      <td>Delantero</td>
    </tr>
  </tbody>
</table>

In this example, I've included the header cell because it would look strange without it.
Now, let's give this a yellow background to make it stand out a bit.

.age {
  background-color: yellow;
}

Notice the new style background-color which sets the background color. This can be applied to any element, including <body> which will change the page's background.

Combining Selectors

Say we want to give the intersecting cell even more impact. We can do so by combining the row and column selectors.

#carlos .age {
  font-weight: 900;
}

We can also limit in other ways, One is to use a combination of elements and classes.
The following code will only change the non-heading (data) cells with the age class.

td.age {
  font-size: 150%;
}

When you run this, you should see the numbers in the age column grow bigger by 50%, but the heading will remain the same because it's not a td.
Notice the difference between the last two examples. The first #carlos .age with a space between the options says to select the elements with class age inside the element with id carlos. The second td.age has no space, which says to select elements that are both data cells and class age.
There are many other ways of specifying and combining selectors, but these are the main ones you'll use often. For more, follow the link on the Summary page.

Final Code

Next: Javascript Arrays and Loops

Tech School

Table of Contents

Web Development Lesson 3 - Tables

Selectors

Objective

Setup

ID

Class

Combining Selectors

Final Code

Tech School

User Tools

Site Tools

Table of Contents

Web Development Lesson 3 - Tables

Selectors

Objective

Setup

ID

Class

Combining Selectors

Final Code

Page Tools