Uso de Pseudo-clases

Pseudo-clases de usuario

a:hover {color: red} (Al pasar el ratón)

button:active {transform: scale(0.9)} (Al hacer clic)

a:hover { color: red; }
button:active { background: orange; }

Estados de Hipervínculos

Controla cómo se ven los enlaces según si se han visitado o no.

a:link { color: blue; }
a:visited { color: purple; }

Pseudo-clases estructurales

Seleccionan elementos según su orden en el HTML.

• Primer elemento (:first-child)
• Segundo elemento
• Tercer elemento
• Último elemento (:last-child)

li:first-child { font-weight: bold; }
li:last-child { color: green; }
li:nth-child(2) { background: #eee; }

Estados de Formulario

input:focus (Cuando el cursor está dentro)

input:focus { border: 2px solid blue; }