Differences

This shows you the differences between two versions of the page.

--- web_design:horario:selectors [2021/10/11 09:03]
mag created
+++ web_design:horario:selectors [2023/08/16 09:33] (current)
@@ Line 1: / Line 1: @@
 ====== Web Development Lesson 3 - Tablas ======
 ===== Selectors =====
+==== Objective ====
+In this activity, we'll look at selectors, which allow you more control over what CSS rules are applied to.
 ==== Setup ====
+  * As usual, we'll build on previous work in this activity using [[https://jsfiddle.net|jsfiddle]]. Here's the code again.
+**HTML**
+<code><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></code>
+**CSS**
+<code>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;
+}</code>
+==== 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 <html><id></html> 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 <html>id</html>. Let's call it 'carlos'.
+<code>    <tr id="carlos">
+      <td>Carlos</td></code>
+  * Now we can apply a rule to this row with CSS using <html>#</html>.
+<code>#carlos {
+  font-style: italic;
+}</code>
+  * Now the <html><tr></html> and all elements inside it are italicised.
+==== Class ====
+  * Say we want to highlight the age of every player, We can't use <html>id</html> because that must be unique.
+  * Instead, we apply a <html>class</html> to every element we want to change. Let's call it 'age'.
+<code><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></code>
+  * 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.
+<code>.age {
+  background-color: yellow;
+}</code>
+  * Notice the new style <html>background-color</html> which sets the background color. This can be applied to any element, including <html><body></html> 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.
+<code>#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.
+<code>td.age {
+  font-size: 150%;
+}</code>
+  * 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 <html>td</html>.
+  * Notice the difference between the last two examples. The first <html>#carlos .age</html> with a space between the options says to select the elements with class age inside the element with id carlos. The second <html>td.age</html> 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.
+[[web_design:horario:arrays|Javascript Arrays and Loops]]

Tech School

User Tools

Site Tools

Differences

Page Tools