Selectores avanzados y Pseudo-elementos

Domina :hover, :focus, :nth-child, ::before y ::after para efectos decorativos sin HTML extra.

📖

Teoría

Pseudo-clases (una sola :) representan un estado del elemento:

:hover → cursor encima

:focus → elemento enfocado (teclado/click)

:nth-child(n) → el enésimo hijo

:first-child, :last-child

:not(selector) → que NO coincida

Pseudo-elementos (doble ::) crean "elementos virtuales":

::before → inserta contenido antes del elemento

::after → inserta contenido después

::placeholder → estilo del placeholder de inputs

css

/* Decoración con ::before y ::after */
.seccion-titulo {
  position: relative;
  padding-left: 1rem;
}
.seccion-titulo: :before{
  content: '';       /* puede ser vacío o texto */
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: #4F8EF7;
  border-radius: 2px;
}

/* Filas alternas en tabla */
tr: nth-child(even){ background: #1C1C26; }
tr: nth-child(odd){ background: #13131A; }

/* Input con foco visual */
input: focus{
  outline: none;
  border-color: #4F8EF7;
  box-shadow: 0 0 0 3px rgba(79,142,247,0.2);
}

⚡

Ejercicio práctico

🎯 Tu misión

Crea efectos decorativos usando SOLO CSS, sin agregar HTML extra: un menú con línea animada en hover usando ::after, una lista donde los items pares tienen fondo diferente, y campos de formulario con estilos de focus.

Vista previa

←Capítulo anterior

Siguiente capítulo→