#11 Selectores: a quién le das estilo#11 Selectores: a quién le das estilo

Selector de etiqueta

Es el que has usado hasta ahora: el nombre de la etiqueta selecciona todos los elementos de ese tipo.

p { color: gray; }      /* todos los párrafos */
h2 { color: teal; }     /* todos los h2 */

Es útil para los estilos generales, pero se queda corto en cuanto quieres que solo algunos párrafos sean distintos. Para eso están las clases.

Selector de clase: .nombre

Una clase es una etiqueta que tú pones a los elementos con el atributo class. Luego, en CSS, la seleccionas con un punto delante:

1
2
3
4

• Una clase se puede repetir en todos los elementos que quieras, aunque sean de etiquetas distintas.
• Un elemento puede tener varias clases, separadas por espacios: class="aviso grande".

1
2
3

Selector de id: #nombre

El atributo id es un nombre único en la página (ya lo usaste para los enlaces internos y los formularios). En CSS se selecciona con almohadilla:

#portada {
  background: black;
  color: white;
}

Combinar selectores

Agrupar con coma

Si varios selectores comparten estilo, sepáralos con comas y escríbelo una sola vez:

h1, h2, h3 {
  font-family: Georgia, serif;
}

Descendientes con espacio

Un espacio entre dos selectores significa «que esté dentro de»:

1
2
3
4
5

Solo cambian los enlaces que están dentro del <nav>. Igual funciona con clases: .tarjeta h2 selecciona los h2 que hay dentro de algo con clase tarjeta.

Las dos cosas a la vez, sin espacio

Sin espacio, el selector exige que el mismo elemento cumpla las dos condiciones:

p.aviso { }          /* párrafos que además tienen la clase aviso */
.boton.peligro { }   /* elementos con la clase boton Y la clase peligro */

Estados: las pseudoclases

Las pseudoclases seleccionan elementos según su estado o su posición. Se escriben con dos puntos:

1
2
3
4
5
6
7

Especificidad: qué regla gana

En la lección anterior viste que, a igual importancia, gana la última regla. Pero no todos los selectores son igual de importantes. Cuanto más específico es un selector, más fuerza tiene:

1

Aunque la regla de p está después, gana .nota porque es más específica. Solo cuando la fuerza es la misma decide el orden.

Errores típicos

• Olvidar el punto de la clase en CSS (aviso { }) o ponerlo en el HTML (class=".aviso").
• Escribir class="aviso, grande" con coma. En el HTML, las clases se separan con espacios.
• Confundir .a .b con .a.b: el espacio significa «dentro de».
• Nombres de clase con espacios o mayúsculas raras (class="Mi Clase" son dos clases: Mi y Clase).
• No entender por qué una regla no se aplica. Inspecciona el elemento: la regla perdedora aparece tachada.

Ejercicios

Ejercicio 1: clases para los precios (fácil)

Haz que los dos precios se vean en verde y negrita, y que la oferta tenga además fondo amarillo. No toques las reglas de etiqueta.

1
2
3
4
5

<p>Precio: <span class="precio">15 €</span></p>
<p>Precio: <span class="precio">30 €</span></p>
<p class="oferta">¡Oferta! Llévate las dos por 40 €.</p>

.precio {
  color: green;
  font-weight: bold;
}

.oferta {
  background: yellow;
}

Ejercicio 2: el menú (medio)

Sin añadir clases, haz que los enlaces del <nav> sean blancos sobre fondo negro, sin subrayado (text-decoration: none), y que al pasar el ratón cambien a fondo gold y texto negro. El enlace del párrafo no debe cambiar. Recuerda el foco.

1
2
3
4
5
6

nav a {
  color: white;
  background: black;
  padding: 6px 10px;
  text-decoration: none;
}

nav a:hover,
nav a:focus {
  background: gold;
  color: black;
}

Ejercicio 3: ¿quién gana? (reto)

Sin probarlo, di de qué color saldrá cada párrafo. Luego cópialo en la zona de pruebas y comprueba.

p { color: black; }
.importante { color: red; }
#especial { color: blue; }
p { color: green; }

<p>Párrafo A</p>
<p class="importante">Párrafo B</p>
<p class="importante" id="especial">Párrafo C</p>

Ficha resumen

• p = etiqueta · .clase = clase (reutilizable) · #id = id (único).
• a, b = los dos · a b = b dentro de a · a.b = el mismo elemento con las dos condiciones.
• Pseudoclases: :hover, :focus, :active, :first-child, :nth-child().
• Especificidad: etiqueta < clase < id < style. A igual fuerza, gana la última.
• Da estilo con clases y nombres que digan qué es el elemento.

Glosario