1
00:00:00,690 --> 00:00:17,649
Otro elemento importante son las pseudo clases y pseudo elementos. Se refieren a elementos que diferencian un objeto dentro de la página HTML según su estado, según si estamos encima de él, según donde aparece, etc.

2
00:00:17,649 --> 00:00:41,630
Vamos a ver una lista de ellos, o unos cuantos de ellos, los más importantes. El primero de ellos es First Child, el primer hijo, el primer elemento contenido nuestro. Entonces, si yo selecciono dentro de div el primer párrafo que hay, y ese lo pongo en rojo, pues te obtendría esta salida. ¿De acuerdo? Esta sería la salida que tendríamos.

3
00:00:41,630 --> 00:00:46,590
Bien, más tenemos por ejemplo en el caso de los enlaces

4
00:00:46,590 --> 00:00:52,609
Los pseudo clases en caso de enlaces tenemos link o visitado, ambas de estas

5
00:00:52,609 --> 00:00:59,390
Entonces link permite establecer características para aquel enlace que todavía no ha sido visitado

6
00:00:59,390 --> 00:01:03,090
Y visite a los que si han sido visitados

7
00:01:03,090 --> 00:01:08,329
Entonces pues en función de esa situación vamos a poner unos colores u otros

8
00:01:08,329 --> 00:01:11,069
O poner unas características u otros

9
00:01:11,069 --> 00:01:14,370
también es muy curioso uno que vamos a ver después

10
00:01:14,370 --> 00:01:15,590
posteriormente que es Hover

11
00:01:15,590 --> 00:01:19,769
que es para cuando estamos encima de ellos trabajando

12
00:01:19,769 --> 00:01:20,310
¿de acuerdo?

13
00:01:21,129 --> 00:01:23,569
bueno, vemos aquí más características

14
00:01:23,569 --> 00:01:26,810
no me quiero extender en esta parte

15
00:01:26,810 --> 00:01:28,250
porque no tiene mayor interés

16
00:01:28,250 --> 00:01:30,569
a este me refería yo antes, a Hover

17
00:01:30,569 --> 00:01:32,870
especificamos el aspecto de elementos

18
00:01:32,870 --> 00:01:34,849
sobre el que se encuentra el ratón

19
00:01:34,849 --> 00:01:35,909
y esto se aplica muy a menudo

20
00:01:35,909 --> 00:01:37,909
por ejemplo en este enlace, cuando estemos sobre él

21
00:01:37,909 --> 00:01:40,590
va a cambiar lo que estamos visualizando ahí

22
00:01:40,590 --> 00:01:43,409
va a cambiarse, va a poner de fondo negro

23
00:01:43,409 --> 00:01:44,469
y color blanco

24
00:01:44,469 --> 00:01:47,010
como podemos apreciar

25
00:01:47,010 --> 00:01:47,310
¿vale?

26
00:01:49,530 --> 00:01:50,769
active lo que permite

27
00:01:50,769 --> 00:01:53,329
especificar es el aspecto de un elemento

28
00:01:53,329 --> 00:01:55,209
cuando se hace click sobre él

29
00:01:55,209 --> 00:01:57,170
y se mantiene el aspecto sobre él

30
00:01:57,170 --> 00:01:59,090
entonces yo aunque pase por encima no cambia

31
00:01:59,090 --> 00:02:01,469
cliqueo

32
00:02:01,469 --> 00:02:03,549
y mientras que estoy con el botón

33
00:02:03,549 --> 00:02:04,810
apretado pues se mantiene

34
00:02:04,810 --> 00:02:06,430
cuando levanto pues cambia

35
00:02:06,430 --> 00:02:08,530
y focus

36
00:02:08,530 --> 00:02:11,289
no sé si me ha saltado alguno

37
00:02:11,289 --> 00:02:12,490
active, focus

38
00:02:12,490 --> 00:02:14,250
lo que nos permite es

39
00:02:14,250 --> 00:02:16,509
especificar el aspecto de un elemento

40
00:02:16,509 --> 00:02:18,569
que toma en ese momento el foco

41
00:02:18,569 --> 00:02:20,150
puede tomarlo bien porque

42
00:02:20,150 --> 00:02:21,830
pongo el ratón encima

43
00:02:21,830 --> 00:02:25,210
y vemos que en este caso el borde ha cambiado

44
00:02:25,210 --> 00:02:27,150
o bien con el tabulador voy a pasar

45
00:02:27,150 --> 00:02:28,530
al siguiente campo y vemos

46
00:02:28,530 --> 00:02:29,789
cómo va cambiando

47
00:02:29,789 --> 00:02:33,289
existe otra clase que tiene que ver con el idioma

48
00:02:33,289 --> 00:02:33,990
lang

49
00:02:33,990 --> 00:02:36,389
y entonces permite establecer

50
00:02:36,389 --> 00:02:38,689
por ejemplo el mismo párrafo en dos idiomas

51
00:02:38,689 --> 00:02:40,129
entonces aquí

52
00:02:40,129 --> 00:02:42,270
podremos aplicar por ejemplo

53
00:02:42,270 --> 00:02:44,530
los quotes o los

54
00:02:44,530 --> 00:02:46,409
caracteres de cita

55
00:02:46,409 --> 00:02:49,050
diferentes en un idioma

56
00:02:49,050 --> 00:02:50,550
en este caso cuando es español

57
00:02:50,550 --> 00:02:53,310
lo ponemos con estos dos menores y estos dos mayores

58
00:02:53,310 --> 00:02:54,569
y cuando es en inglés

59
00:02:54,569 --> 00:02:56,550
con la comilla doble, por ejemplo

60
00:02:56,550 --> 00:02:58,530
más pseudo-elementos

61
00:02:58,530 --> 00:03:01,110
la primera línea o la primera letra

62
00:03:01,110 --> 00:03:03,030
no hace falta explicar mucho lo que es

63
00:03:03,030 --> 00:03:05,090
entonces por ejemplo aquí decimos que la primera

64
00:03:05,090 --> 00:03:07,289
línea y vemos además que aparece

65
00:03:07,289 --> 00:03:08,210
con dobles

66
00:03:08,210 --> 00:03:11,009
dos puntos

67
00:03:11,009 --> 00:03:13,509
se convierte a mayúsculas

68
00:03:13,509 --> 00:03:14,849
o la primera letra

69
00:03:14,849 --> 00:03:17,389
podemos hacer cosas tan bonitas como esta, por ejemplo

70
00:03:17,389 --> 00:03:19,409
incluso mejorar esto con otro tipo

71
00:03:19,409 --> 00:03:21,310
de letra, aquí en la L, etc, etc

72
00:03:21,310 --> 00:03:23,270
y sin hacer nada en nuestro

73
00:03:23,270 --> 00:03:25,289
contenido, nuestro contenido

74
00:03:25,289 --> 00:03:26,729
simplemente tendrá la primera

75
00:03:26,729 --> 00:03:29,210
vamos a verlo, como seguramente tenemos

76
00:03:29,210 --> 00:03:31,449
la fuente del marco, lo podemos

77
00:03:31,449 --> 00:03:33,530
ver, aquí lo estamos viendo perfectamente

78
00:03:33,530 --> 00:03:43,050
Aquí aparece que es un párrafo normal y corriente, normal y corriente, y sin embargo el aspecto es bastante interesante.

79
00:03:43,990 --> 00:03:48,310
En este caso, por ejemplo, un párrafo, su primera letra va a ser este.

80
00:03:48,550 --> 00:03:52,169
Es verdad que si hay una imagen, pues esta no la modifica, ¿de acuerdo?

81
00:03:53,189 --> 00:04:02,389
Podemos incluso, aquí es algo que ya veremos más despacio, pero vemos cómo hacemos flotar la imagen a la derecha.

82
00:04:02,389 --> 00:04:06,909
Entonces vemos aquí la imagen como está ahí arriba a la derecha

83
00:04:06,909 --> 00:04:11,469
Entonces en este caso podríamos ponerlo a la izquierda y sí funcionaría la L

84
00:04:11,469 --> 00:04:13,270
Para esto estamos contando este ejemplo

85
00:04:13,270 --> 00:04:20,470
Y si el primer carácter no es alfanumérico

86
00:04:20,470 --> 00:04:25,569
Pues sí se aplica a todo hasta que aparece un carácter alfanumérico

87
00:04:25,569 --> 00:04:29,410
Después tenemos otros pseudoelementos que son before y after

88
00:04:29,410 --> 00:04:36,730
Before por ejemplo permite establecer algo, una característica antes de lo que estamos seleccionando

89
00:04:36,730 --> 00:04:42,670
Tenemos la clase cuidado dentro de un párrafo y antes quiero poner la palabra aviso

90
00:04:42,670 --> 00:04:49,389
Con un tema que esté como en negrita y que tenga que ser subrayado

91
00:04:49,389 --> 00:04:53,730
Pues aquí podemos ver aviso antes y con esas características

92
00:04:53,730 --> 00:05:18,470
Si viéramos el código, el código de aquí, lo único, vamos a ver la fuente del marco, lo único que estamos poniendo es que la clase se ha cuidado, nada más, todo lo demás lo pone él simplemente de esta manera, con esta clase, o podemos por ejemplo, escrito por Barto, entonces nosotros podemos poner después de este párrafo, escrito por Barto.

93
00:05:18,470 --> 00:05:21,629
También podemos incluir una imagen

94
00:05:21,629 --> 00:05:23,990
Antes de algo pongamos esta imagen

95
00:05:23,990 --> 00:05:27,949
Llamamos a la URL con la dirección de esa imagen

96
00:05:27,949 --> 00:05:31,730
Mucho cuidado, y eso sí es importante

97
00:05:31,730 --> 00:05:35,850
Es que cuando ponemos content, o bien ponemos URL o bien ponemos texto

98
00:05:35,850 --> 00:05:38,509
Pero lo que nos admite es meter código HTML

99
00:05:38,509 --> 00:05:41,529
No podemos poner enfatizado aviso

100
00:05:41,529 --> 00:05:44,829
Simplemente lo pondría tal cual esa información

101
00:05:44,829 --> 00:05:46,730
Con lo cual no nos vale para nada

102
00:05:46,730 --> 00:05:50,170
Mención aparte merecen los contadores

103
00:05:50,170 --> 00:05:53,230
Ya hemos visto que por ejemplo en las listas ordenadas

104
00:05:53,230 --> 00:05:57,610
Automáticamente se puede indicar un orden de las cuestiones

105
00:05:57,610 --> 00:06:01,750
Pero podemos nosotros establecer nuestra propia lista

106
00:06:01,750 --> 00:06:03,790
Entonces podemos decir por ejemplo

107
00:06:03,790 --> 00:06:06,689
Que antes de cada párrafo

108
00:06:06,689 --> 00:06:08,910
Pongamos un contador

109
00:06:08,910 --> 00:06:11,370
El cual se llama cuenta párrafos

110
00:06:11,370 --> 00:06:13,949
Y irlo incrementando

111
00:06:13,949 --> 00:06:16,990
Entonces seríamos 1, 2, 3, 4 y 5

112
00:06:16,990 --> 00:06:21,970
En este caso, además, podemos resetearlo

113
00:06:21,970 --> 00:06:24,970
Vemos que se resetea cada vez que aparece la etiqueta PRE

114
00:06:24,970 --> 00:06:27,410
Con lo cual aquí no lo hemos visto porque solo hay esta información

115
00:06:27,410 --> 00:06:29,709
Pero aquí que hemos puesto esto y esto

116
00:06:29,709 --> 00:06:33,449
Vemos que se resetea perfectamente el contador

117
00:06:33,449 --> 00:06:39,149
Podemos empezar incluso desde valores distintos

118
00:06:39,149 --> 00:06:40,889
O incrementando de 10 en 10

119
00:06:40,889 --> 00:06:42,569
Como es el caso actual

120
00:06:42,569 --> 00:06:46,509
e incluso para dejarlo un poco más elegante

121
00:06:46,509 --> 00:06:50,069
poner el contador y punto y un espacio

122
00:06:50,069 --> 00:06:52,069
el contador, punto y un espacio

123
00:06:52,069 --> 00:06:55,889
también a este contador le podemos indicar

124
00:06:55,889 --> 00:06:57,949
cómo lo queremos ver si numérico

125
00:06:57,949 --> 00:07:00,990
si por ejemplo en números romanos en mayúsculas

126
00:07:00,990 --> 00:07:02,949
estamos viéndolo en números romanos

127
00:07:02,949 --> 00:07:07,050
en letras alfabéticas dependiendo incluso del nivel

128
00:07:07,050 --> 00:07:11,129
aquí estamos reseteando a nivel h1 y a nivel h2 y en p

129
00:07:11,129 --> 00:07:12,509
entonces estamos reseteando

130
00:07:12,509 --> 00:07:15,529
todo esto es un juego que podemos ir mejorando

131
00:07:15,529 --> 00:07:16,589
de cualquier manera

132
00:07:16,589 --> 00:07:18,569
aquí igual que ponemos este content

133
00:07:18,569 --> 00:07:21,589
podemos poner dibujitos o cualquier otra cuestión

134
00:07:21,589 --> 00:07:23,649
a gusto del consumidor