Lección 3 de desarrollo web - Tablas
- Selectores

Lección 3 de desarrollo web - Tablas

Selectores

Objetivo

En esta actividad, veremos los selectores, que le permiten un mayor control sobre a qué se aplican las reglas CSS.

Preparacion

Como de costumbre, nos basaremos en trabajos anteriores en esta actividad utilizando jsfiddle . Aquí está el código de nuevo.

HTML

<tabla>
  <thead>
    <tr>
      <th> Nombre </th>
      <th> Apellido </th>
      <th> Nacionalidad </th>
      <th> Edad </th>
      <th> Posición </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>

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;
}

Identificador Único

El uso de estilos en HTML le permite cambiar un solo elemento, mientras que el uso de CSS le permite cambiar todos los elementos asociados, pero ¿qué sucede si desea cambiar solo ciertos elementos?
Para ello utilizamos selectores, que identifican los elementos concretos que queremos tratar de forma diferente.
El primero de ellos es <id> que identifica un solo elemento en la página. Debe ser único.
Resaltemos los datos de Carlos en amarillo.
Primero, necesitamos especificar la fila, dándole un id. Llamémoslo 'carlos'.

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

Ahora podemos aplicar una regla a esta fila con CSS usando #.

#carlos {
  font-style: italic;
}

Ahora, <tr id="carlos"> y todos los elementos que contiene están en cursiva.

Clase

¿Y si queremos resaltar la edad de cada jugador? No podemos usar id porque debe ser único.
En su lugar, aplicamos un classa cada elemento que queremos cambiar. Llamémoslo 'edad'.

<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>

En este ejemplo, he incluido la celda de encabezado porque se vería extraño sin ella.
Ahora, démosle a esto un fondo amarillo para que se destaque un poco.

.age {
  background-color: yellow;
}

Observe el nuevo estilo background-color que establece el color de fondo. Esto se puede aplicar a cualquier elemento, incluido el <body> que cambiará el fondo de la página.

Combinando Selectores

Queremos darle aún más impacto a la celda que se cruza. Podemos hacerlo combinando los selectores de fila y columna.

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

También podemos limitar de otras formas, una es utilizar una combinación de elementos y clases.
El siguiente código solo cambiará las celdas sin encabezado (datos) con la clase de edad.

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

Cuando ejecute esto, debería ver que los números en la columna de edad aumentan en un 50%, pero el título seguirá siendo el mismo porque no es un td.
Note la diferencia entre los dos últimos ejemplos. El primero #carlos .age con un espacio entre las opciones dice seleccionar los elementos con edad de clase dentro del elemento con id carlos. El segundo td.age no tiene espacio, lo que dice seleccionar elementos que sean tanto celdas de datos como edad de clase.
Hay muchas otras formas de especificar y combinar selectores, pero estas son las principales que utilizará con frecuencia. Para obtener más información, siga el enlace de la página Resumen.

Siguiente: Matrices

Table of Contents

Lección 3 de desarrollo web - Tablas

Selectores

Objetivo

Preparacion

Identificador Único

Clase

Combinando Selectores