Cargando...

Pseudo-clases CSS

Ya dominas selectores de etiqueta, class, id y atributo. Falta una capa: a veces no quieres el mismo aspecto siempre; quieres un cambio cuando el puntero está sobre el botón, cuando alguien llega al campo con Tab o cuando el enlace ya se abrió. Para eso están las pseudo-clases — sin class nueva en el HTML.

¿Qué significa pseudo-clase?

Una pseudo-clase es una palabra que se pega al selector con dos puntos simples (:). En el HTML no ves algo como class="hover". El navegador activa la regla cuando se cumple la condición: puntero encima, foco, historial del enlace o posición entre los hijos del padre.

Pseudo-clases habituales

Empieza por estas. Hay más nombres, pero suelen bastar para empezar en UI.

📊 Pseudo-clases cotidianas de CSS

Pseudo-clase Cuándo se activa Ejemplo
:hover El puntero está sobre el elemento a:hover
:focus El elemento tiene foco (teclado o clic) input:focus
:visited El enlace ya se visitó (con límites de privacidad) a:visited
:first-child El elemento es el primer hijo de su padre li:first-child
:nth-child(n) El hijo n-ésimo, o impar/par tr:nth-child(odd)
:disabled El control del formulario está desactivado button:disabled

Hover — :hover

Con :hover el aspecto cambia mientras el puntero está sobre el elemento. Botones y enlaces se sienten vivos con un cambio pequeño — no con un salto de diseño.

Hover — feedback del botón

css
CSS Code 
button:hover {
background-color: #0f766e;
color: #fff;
}

Nota sobre hover

Mantén el cambio suave. En táctil casi no hay hover real; no pongas información esencial solo dentro de :hover.

Foco — :focus

:focus selecciona el elemento activo ahora — por ejemplo tras Tab. Sin anillo de foco visible, quien usa teclado se pierde en el formulario.

Foco — anillo claro en el input

css
CSS Code 
input:focus {
outline: 2px solid #0f766e;
outline-offset: 2px;
}

Hover y foco: hacen falta los dos

Hover es para el puntero. Foco significa «este control está activo ahora». No quites outline sin un sustituto igual de claro.

Enlaces visitados — :visited

:visited colorea enlaces que el navegador cree que ya abriste. Suele limitarse al color (y pocas propiedades). No cuentes con cambiar padding o el diseño — la privacidad lo restringe.

Visitado — color suave del enlace

css
CSS Code 
a:visited {
color: #6b21a8;
}

Orden de estados del enlace

Si escribes varios estados juntos, un orden seguro habitual es: link → visited → hover → focus (a veces LVHA). Así hover y foco siguen visibles también en enlaces visitados.

Primer hijo — :first-child

:first-child significa que el elemento es el primer hijo de su padre — no «el primer li de toda la página», sino el primero entre hermanos bajo ese padre.

Primer hijo — resaltar el primer ítem

css
CSS Code 
li:first-child {
font-weight: 700;
}

Siguiente paso: :nth-child

Con :nth-child(odd) o :nth-child(3) consigues rayas o «cada tercero». Domina :first-child y luego esos patrones.

Buenos hábitos

  • Pseudo-clase = dos puntos simples (:hover); pseudo-elemento = dobles (::) — sesión siguiente
  • Empareja siempre el hover interactivo con un :focus claro
  • Colores visited discretos
  • Prueba también con Tab, no solo con el ratón

Pruébalo tú

  1. Página corta con <button>, <input>, unos enlaces y <ul> con tres <li>.
  2. Añade button:hover { background-color: #0f766e; color: #fff; } y pasa el ratón por el botón.
  3. Añade input:focus { outline: 2px solid #0f766e; } y entra al campo con Tab.
  4. Añade a:visited { color: #6b21a8; }, abre un enlace y vuelve.
  5. Añade li:first-child { font-weight: 700; } — solo el primer ítem en negrita.

Errores habituales

  • Escribir ::hover en vez de :hover — el doble es para pseudo-elementos
  • Estilar hover y quitar el outline de foco sin reemplazo
  • Esperar libertad total de :visited para cualquier propiedad
  • Creer que p:first-child significa «el primer párrafo en cualquier sitio»
  • Meter texto importante solo en :hover para que el usuario táctil no lo vea

Resumen

  • Las pseudo-clases eligen por estado o posición con dos puntos simples
  • :hover y :focus dan feedback; conserva ambos
  • :visited colorea el enlace abierto dentro de los límites del navegador
  • :first-child toma el primer hijo; :nth-child es el siguiente paso
  • Unos dos puntos = pseudo-clase; dobles = pseudo-elemento
  • Practica con ratón, Tab y una lista corta

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
7
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 1 de 1
Css Tutorial