0:00:00.831,0:00:05.211
Estamos de regreso con nuestra página web que tiene enlaces en una lista de pinturas famosas.

0:00:05.211,0:00:11.743
El CSS empieza con una regla que establece el tipo de letra "sans-serif" para todo lo que está en la etiqueta ""

0:00:11.743,0:00:17.114
Luego una regla para selectores agrupados que cambia el tipo de letra en los encabezados "" y "".

0:00:17.114,0:00:24.737
Y luego tenemos muchas reglas que probablemente no habías visto antes y que parecen un poco graciosas.

0:00:24.737,0:00:29.967
Todas empiezan con una "a", luego dos puntos, y luego una palabra.

0:00:29.967,0:00:35.504
¿Qué significan los dos puntos?[br]¿Para qué son esas reglas?

0:00:35.504,0:00:41.065
Bueno, todas esas cosas que empiezan con dos puntos se llaman pseudo-clases.

0:00:41.065,0:00:48.002
Las pseudo-clases se usan para seleccionar elementos con base en información que no es realmente parte de la estructura de la página web,

0:00:48.002,0:00:51.826
o que simplemente no puede ser expresada usando otros selectores.

0:00:51.826,0:00:57.430
En esta página, estoy usando pseudo-clases para estilizar los enlaces basándome en su estado.

0:00:57.430,0:01:03.449
La pseudo-clase "link" selecciona los enlaces en la página, que el usuario todavía no ha visitado.

0:01:03.449,0:01:06.582
Que la mayoría de los navegadores ponen en azul por defecto.

0:01:06.582,0:01:10.405
La pseudo-clase "visited" seleccionará todos los enlaces que el usuario ya ha visitado.

0:01:10.405,0:01:13.294
Que la mayoría de los navegadores ponen en morado por defecto.

0:01:13.294,0:01:16.121
Si queremos realmente, podemos cambiar los colores.

0:01:16.121,0:01:18.083
Pero deberíamos tener una buena razón para hacerlo.

0:01:18.083,0:01:22.954
La gente está acostumbrada a asociar el azul y el morado con las cosas que han visto y que no han visto.

0:01:22.954,0:01:25.549
Y a la gente le gusta saber qué páginas ya ha visitado.

0:01:25.549,0:01:28.474
Así que no deberías cambiar eso sin una buena razón.

0:01:28.474,0:01:31.092
Así que voy a borrar estas dos reglas.

0:01:31.092,0:01:34.221
Porque, personalmente, no creo que sea una buena idea estar jugando con eso.

0:01:34.221,0:01:38.972
La siguiente es una regla divertida: "a:hover".

0:01:38.972,0:01:45.698
La pseudo-clase "hover" selecciona un elemento en tanto que el ratón esté sobre él.

0:01:45.698,0:01:48.408
Así que las propiedades se aplicarán sólo en ese momento.

0:01:48.408,0:01:53.353
Pruébenlo pausando esta guía paso a paso y pasen por encima de los enlaces para ver qué pasa.

0:01:53.353,0:01:57.406
¡Adelante!, esperaré. "Hover", "hover", "hover", "hover"...

0:01:57.406,0:02:01.165
¿Vieron que el fondo cambió de color?[br]Es un efecto muy bueno.[br]

0:02:01.165,0:02:05.073
Y en realidad pueden usar la pseudo-clase "hover" en cualquier elemento, no solamente en enlaces.

0:02:05.073,0:02:07.662
Sólo recuerden que no funcionará en todos los dispositivos.

0:02:07.662,0:02:11.421
Como en un teléfono, no tienes manera de pasar por encima. Sólo puedes tocar o no tocar.

0:02:11.421,0:02:15.298
Es genial tener un efecto "hover" como un extra, pero no confíes en él.

0:02:15.298,0:02:20.503
¿Y qué pasa con estos dos últimos?[br]Son similares a "hover".

0:02:20.503,0:02:23.067
Dependen de lo que el usuario esté haciendo.

0:02:23.067,0:02:27.191
La pseudo-clase "active" selecciona elementos que están siendo activados.

0:02:27.191,0:02:34.076
Como en un enlace, si el usuario está presionando en el enlace, justo antes de que realmente cambie de página.

0:02:34.076,0:02:38.614
La pseudo-clase "focus" selecciona los elementos que actualmente tienen el enfoque,

0:02:38.614,0:02:42.394
lo que generalmente pasa si usas la tecla TAB.

0:02:42.394,0:02:47.744
Pausa esta guía paso a paso y trata de presionar en los enlaces y muévete a través de ellos con la tecla TAB, para ver qué pasa.

0:02:47.744,0:02:51.497
¿Viste que el fondo cambia de color cuando haces eso?

0:02:51.497,0:02:56.415
Escogí la misma propiedad para "hover", "active" y "focus", porque todos son del mismo tipo.

0:02:56.415,0:02:58.842
El usuario se está dirigiendo al enlace de alguna manera.

0:02:58.842,0:03:03.655
Muchos diseñadores web usan las mismas propiedades para estos tres estados por esa misma razón.

0:03:03.655,0:03:07.114
¿Qué pasa si decido que quiero cambiar el color de fondo?

0:03:07.114,0:03:13.552
Bueno, puedo ir a cada uno de ellos y cambiar cada uno.

0:03:13.552,0:03:15.885
O puedo hacer lo que recién aprendimos.

0:03:15.885,0:03:20.140
Puedo agrupar los selectores, poniéndolos en una sola regla, separados por comas.

0:03:20.140,0:03:27.214
Así que pondremos una coma después de éste, "a:active," luego "a:focus".

0:03:27.214,0:03:37.418
Ahora puedo borrar estos dos y puedo cambiar estos tres al mismo tiempo. Bien.

0:03:37.418,0:03:41.531
Estas son las primeras pseudo-clases que hemos mostrado aquí, pero no son las únicas.

0:03:41.531,0:03:45.106
Puedes buscar más pseudo-clases de CSS en Internet,

0:03:45.106,0:03:48.496
o esperar a que enseñemos más aquí.