CSS

Selectores

Seleccionan el o los elementos HTML a los que se van a aplicar los estilos¹ indicados bajo el selector. Hay 4 maneras básicas de selecionar: por identificador (#id), por atributo (elmento[atributo=valor]), por clase (.clase), o por nombre del elemento HTML (elemento).

La siguiente tabla no tiene ningún estilo. Vamos a ir dándole estilo utilizando cada tipo de selector:

<table>
  <caption id="leyenda">Resumen de tipos de selectores</caption>
  <thead>
    <tr>
      <th></th>
      <th>Tipo</th>
      <th>Regla CSS</th>
      <th>Elemento HTML seleccionado</th>
    </tr>
  </thead>
  <tbody>
    <tr class="separador">
      <th rowspan="4">Básicos</th>
      <td>Id</td>
      <td><code>#id1 { color: gray; }</code></td>
      <td><code>&lt;p id="id1">Párrafo&lt;/p></code></td>
    </tr>
    <tr>
      <td>Atributo</td>
      <td><code>p[title] { color: gray; }</code></td>
      <td><code>&lt;p title="Título">Párrafo&lt;/p></code></td>
    </tr>
    <tr>
      <td>Clase</td>
      <td><code>.clase1 { color: gray; }</code></td>
      <td><code>&lt;p class="clase1">Párrafo&lt;/p></code></td>
    </tr>
    <tr>
      <td>Nombre</td>
      <td><code>p { color: gray; }</code></td>
      <td><code>&lt;p>Párrafo&lt;/p></code></td>
    </tr>
    <tr class="separador">
      <th rowspan="2">Pseudo</th>
      <td>Clase</td>
      <td><code>a:hover { color: blue; }</code></td>
      <td><code>&lt;a href="">Enlace&lt;/a></code></td>
    </tr>
    <tr>
      <td>Elemento</td>
      <td><code>a::before { content: '🔗 '; }</code></td>
      <td><code>&lt;a href="">Enlace&lt;/a></code></td>
    </tr>
    <tr class="separador">
      <th rowspan="3">Otros</th>
      <td>Universal</td>
      <td><code>* { color: blue; }</code></td>
      <td>Aplica a todos los elementos del HTML</td>
    </tr>
    <tr>
      <td>Grupos</td>
      <td><code>#id1, #id2 { color: gray; }</code></td>
      <td><code>&lt;p id="id1">Párrafo 1&lt;/p>&lt;p id="id2">Párrafo 2&lt;/p></code></td>
    </tr>
    <tr>
      <td>Combinados</td>
      <td><code>p > span { color: red; }</code></td>
      <td><code>&lt;p>Párrafo &lt;span>importante&lt;span>&lt;/p></code></td>
    </tr>
  </tbody>
</table>

/* Añade aquí las reglas CSS */

Pulsa en el botón CSS y añade, de una en una, las siguientes reglas, y observa los cambios:

1. Selector por id del elemento HTML:

   #leyenda {
     color: #222;
     font-family: Georgia, Times, serif;
     font-size: 20px;
     font-style: italic;
     padding-bottom: 10px;
     border-bottom: 1px solid #bfbfbf;
     margin-bottom: 20px;
   }
   

   ❓ Ejercicio: Identifica en el HTML a qué elemento se le está aplicando el estilo.

2. Selector por atributo del elemento HTML:

   th[rowspan] {
     font-family: Georgia, Times, serif;
     font-size: 11px;
     writing-mode: vertical-lr;
     padding-right: 15px;
   }
   

   ❓ Pregunta: Si hubieras utilizado th[rowspan="4"] ¿qué celda de la tabla hubiera cambiado?.

3. Selector por clase del elemento HTML:

   .separador > td {
     border-top: 1px solid #bfbfbf;
   }
   

   ❓ Pregunta: En este caso se está utilizando un selector combinado de clase y elemento hijo ¿Qué elementos de nuestro HTML se están seleccionando en este caso?

4. Selectores por nombre del elemento HTML:

   table {
     margin: 0 auto;
     border-collapse: collapse;
     border-spacing: 0;
   }
   th {
     font-size: 15px;
     text-align: left;
   }
   td {
     padding-right: 20px;
     font-size: 10px;
     line-height: 2;
   }
   tr:nth-child(2n+1) > td {
     background: #eee;
   }
   

   ❓ Ejercicio: La última regla CSS utiliza una pseudo-clase que veremos en la siguiente sección. Intenta modificar ese selector para que aplique a las líneas pares en vez de las impares.

🔍 Nota: Desde el navegador puedes inspeccionar cada elemento, modificar sus estilos y ver los cambios directamente reflejados: Botón derecho sobre el elemento ➜ "Inspeccionar" ➜ "Inspector" (CSS). Para obtener el selector CSS de un elemento: "Inspector" (HTML) ➜ botón derecho sobre el código HTML del elemento ➜ "Copiar" ➜ "Selector CSS".