Saltar al contenido principal
Codigo Heroe
Tarea anterior
Selectores de CSS: tipos y combinaciones2/17
A la lista de tareas
  1. 1. Estilos en línea sin selectores
  2. 2. Selectores de tipo
  3. 3. Selectores de clase
  4. 4. Combinación de etiquetas y clases
  5. 5. Selectores de descendientes
  6. 6. Selectores de hermanos adyacentes
  7. 7. Combinación de descendientes y hermanos
  8. 8. Selectores de hijos
  9. 9. Pseudoclases :first-child y :last-child
  10. 10. La pseudoclase :nth-child
  11. 11. :nth-child y selectores de descendientes
  12. 12. La pseudoclase :hover
  13. 13. Efectos dinámicos con :hover
  14. 14. Pseudoclases :link, :visited y :active
  15. 15. La pseudoclase :focus
  16. 16. Selectores de atributos
  17. 17. Selectores de ID
Siguiente tarea
  • Matriz de skills
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

Selectores de tipo

Agregar el atributo style a cada etiqueta resulta incómodo y lleva tiempo. Sobre todo cuando podemos conseguir el mismo resultado con una sola regla de CSS que use un selector para la etiqueta li.

Los selectores de tipo permiten aplicar estilos a todos los elementos de una lista, todas las imágenes, todos los párrafos, etc. Se escriben con el nombre de la etiqueta, sin los símbolos < y >. Por ejemplo:

li {
  /* estilos para los elementos de lista */
}

Una misma regla puede aplicarse a varios selectores. En ese caso, se separan con comas:

a, img {
  /* estilos para los enlaces y las imágenes */
}
  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Selectores de tipo</title> <link rel="stylesheet" href="course-1.css"> <link rel="stylesheet" href="style.css"> </head> <body> <ul class="target"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> </html>
CSS

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0
    1. Cierra todos los blancos. Usa un selector de tipo para asignar la propiedad background-color: white; a todos los elementos de la lista.
    Codigo Heroe

    © 2023-2026, codigoheroe.com