Teoría
Teoría

Combinación de etiquetas y clases

CSS permite seleccionar elementos con algo más que una sola clase o etiqueta. Por ejemplo, podemos combinar una etiqueta y una clase, o seleccionar un elemento que tenga dos clases a la vez. Para hacerlo, escribimos todas las partes del selector juntas, sin espacios. Veamos algunos ejemplos.

Al combinar una etiqueta y una clase, primero se escribe el nombre de la etiqueta y después la clase:

ul.target {...} /* selecciona todos los elementos ul con la clase target */

Si un elemento tiene varias clases, su orden en el HTML y en el selector de CSS puede ser distinto. Eso no cambia los elementos seleccionados:

.text.green {...} /* selecciona elementos con las dos clases: text y green */

Puedes combinar tantas clases como necesites:

span.underlined.red.big.text {...} /* selecciona elementos span con las cuatro clases: underlined, red, big y text */

En este capítulo tendrás que colorear los blancos con los selectores adecuados.

Habrá tres resultados posibles para cada disparo, y cada uno tendrá su color:

Blanco cerrado: background-color: white;
Disparo fallado: background-color: red;
Falla del mecanismo (el disparo acierta, pero el blanco no se cierra): background-color: yellow;

Practiquemos con las clases.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Combinación de etiquetas y clases</title> <link rel="stylesheet" href="course-1.css"> <link rel="stylesheet" href="style.css"> </head> <body> <ul class="target"> <li class="first">1</li> <li class="second">2</li> <li class="third">3</li> <li class="fourth">4</li> <li class="fifth">5</li> </ul> </body> </html>

CSS

ObjetivosRealizado

El líder de la carrera de persecución llega al primer puesto de tiro.

Acertó el primer blanco, el mecanismo del segundo falló, luego falló dos disparos seguidos, pero cerró el quinto blanco.