1
00:00:00,831 --> 00:00:05,211
Estamos de regreso con nuestra página web que tiene enlaces en una lista de pinturas famosas.

2
00:00:05,211 --> 00: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 ""

3
00:00:11,743 --> 00:00:17,114
Luego una regla para selectores agrupados que cambia el tipo de letra en los encabezados "" y "".

4
00:00:17,114 --> 00:00:24,737
Y luego tenemos muchas reglas que probablemente no habías visto antes y que parecen un poco graciosas.

5
00:00:24,737 --> 00:00:29,967
Todas empiezan con una "a", luego dos puntos, y luego una palabra.

6
00:00:29,967 --> 00:00:35,504
¿Qué significan los dos puntos?
¿Para qué son esas reglas?

7
00:00:35,504 --> 00:00:41,065
Bueno, todas esas cosas que empiezan con dos puntos se llaman pseudo-clases.

8
00:00:41,065 --> 00: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,

9
00:00:48,002 --> 00:00:51,826
o que simplemente no puede ser expresada usando otros selectores.

10
00:00:51,826 --> 00:00:57,430
En esta página, estoy usando pseudo-clases para estilizar los enlaces basándome en su estado.

11
00:00:57,430 --> 00:01:03,449
La pseudo-clase "link" selecciona los enlaces en la página, que el usuario todavía no ha visitado.

12
00:01:03,449 --> 00:01:06,582
Que la mayoría de los navegadores ponen en azul por defecto.

13
00:01:06,582 --> 00:01:10,405
La pseudo-clase "visited" seleccionará todos los enlaces que el usuario ya ha visitado.

14
00:01:10,405 --> 00:01:13,294
Que la mayoría de los navegadores ponen en morado por defecto.

15
00:01:13,294 --> 00:01:16,121
Si queremos realmente, podemos cambiar los colores.

16
00:01:16,121 --> 00:01:18,083
Pero deberíamos tener una buena razón para hacerlo.

17
00:01:18,083 --> 00: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.

18
00:01:22,954 --> 00:01:25,549
Y a la gente le gusta saber qué páginas ya ha visitado.

19
00:01:25,549 --> 00:01:28,474
Así que no deberías cambiar eso sin una buena razón.

20
00:01:28,474 --> 00:01:31,092
Así que voy a borrar estas dos reglas.

21
00:01:31,092 --> 00:01:34,221
Porque, personalmente, no creo que sea una buena idea estar jugando con eso.

22
00:01:34,221 --> 00:01:38,972
La siguiente es una regla divertida: "a:hover".

23
00:01:38,972 --> 00:01:45,698
La pseudo-clase "hover" selecciona un elemento en tanto que el ratón esté sobre él.

24
00:01:45,698 --> 00:01:48,408
Así que las propiedades se aplicarán sólo en ese momento.

25
00:01:48,408 --> 00:01:53,353
Pruébenlo pausando esta guía paso a paso y pasen por encima de los enlaces para ver qué pasa.

26
00:01:53,353 --> 00:01:57,406
¡Adelante!, esperaré. "Hover", "hover", "hover", "hover"...

27
00:01:57,406 --> 00:02:01,165
¿Vieron que el fondo cambió de color?
Es un efecto muy bueno.


28
00:02:01,165 --> 00:02:05,073
Y en realidad pueden usar la pseudo-clase "hover" en cualquier elemento, no solamente en enlaces.

29
00:02:05,073 --> 00:02:07,662
Sólo recuerden que no funcionará en todos los dispositivos.

30
00:02:07,662 --> 00:02:11,421
Como en un teléfono, no tienes manera de pasar por encima. Sólo puedes tocar o no tocar.

31
00:02:11,421 --> 00:02:15,298
Es genial tener un efecto "hover" como un extra, pero no confíes en él.

32
00:02:15,298 --> 00:02:20,503
¿Y qué pasa con estos dos últimos?
Son similares a "hover".

33
00:02:20,503 --> 00:02:23,067
Dependen de lo que el usuario esté haciendo.

34
00:02:23,067 --> 00:02:27,191
La pseudo-clase "active" selecciona elementos que están siendo activados.

35
00:02:27,191 --> 00:02:34,076
Como en un enlace, si el usuario está presionando en el enlace, justo antes de que realmente cambie de página.

36
00:02:34,076 --> 00:02:38,614
La pseudo-clase "focus" selecciona los elementos que actualmente tienen el enfoque,

37
00:02:38,614 --> 00:02:42,394
lo que generalmente pasa si usas la tecla TAB.

38
00:02:42,394 --> 00: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.

39
00:02:47,744 --> 00:02:51,497
¿Viste que el fondo cambia de color cuando haces eso?

40
00:02:51,497 --> 00:02:56,415
Escogí la misma propiedad para "hover", "active" y "focus", porque todos son del mismo tipo.

41
00:02:56,415 --> 00:02:58,842
El usuario se está dirigiendo al enlace de alguna manera.

42
00:02:58,842 --> 00:03:03,655
Muchos diseñadores web usan las mismas propiedades para estos tres estados por esa misma razón.

43
00:03:03,655 --> 00:03:07,114
¿Qué pasa si decido que quiero cambiar el color de fondo?

44
00:03:07,114 --> 00:03:13,552
Bueno, puedo ir a cada uno de ellos y cambiar cada uno.

45
00:03:13,552 --> 00:03:15,885
O puedo hacer lo que recién aprendimos.

46
00:03:15,885 --> 00:03:20,140
Puedo agrupar los selectores, poniéndolos en una sola regla, separados por comas.

47
00:03:20,140 --> 00:03:27,214
Así que pondremos una coma después de éste, "a:active," luego "a:focus".

48
00:03:27,214 --> 00:03:37,418
Ahora puedo borrar estos dos y puedo cambiar estos tres al mismo tiempo. Bien.

49
00:03:37,418 --> 00:03:41,531
Estas son las primeras pseudo-clases que hemos mostrado aquí, pero no son las únicas.

50
00:03:41,531 --> 00:03:45,106
Puedes buscar más pseudo-clases de CSS en Internet,

51
00:03:45,106 --> 00:03:48,496
o esperar a que enseñemos más aquí.