Teoría
Teoría

Selectores de clase

Una clase se indica con el atributo class, así:

<li class="first"></li>

Este atributo es especial porque CSS permite seleccionar elementos por su clase. Para hacerlo, se usa un selector con esta forma: .nombre_de_clase. Por ejemplo:

.first {
  /* estilos para la clase first */
}

Para empezar, usa nombres de clase que comiencen con una letra del alfabeto latino. Después puedes combinar letras, números y los signos - y _.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Selectores de clase</title> <link rel="stylesheet" href="course-1.css"> <link rel="stylesheet" href="style.css"> </head> <body> <ul class="target"> <li class="hit">1</li> <li class="hit">2</li> <li class="miss">3</li> <li class="hit">4</li> <li class="miss">5</li> </ul> </body> </html>

CSS

ObjetivosRealizado

El biatleta solo acertó tres blancos: el primero, el segundo y el cuarto.

Asigna la propiedad background-color: white; a la clase hit (se cierran los blancos 1, 2 y 4).
Asigna la propiedad background-color: red; a la clase miss (los disparos a los blancos 3 y 5 fallan).