1
00:00:03,890 --> 00:00:10,589
Bueno, ahora vamos a continuar viendo también pseudoselectores, pero en este caso vamos a ver las pseudoclases, ¿vale?

2
00:00:12,210 --> 00:00:17,449
Una vez más, pues nos vamos a ir a nuestra ventana de brackets, ¿vale?

3
00:00:19,250 --> 00:00:24,690
Y vamos a ver si consigo que se vea el Chrome.

4
00:00:25,809 --> 00:00:26,489
Ahí, ¿vale?

5
00:00:27,109 --> 00:00:33,130
Yo ya me he creado aquí un archivo HTML que se llama pseudo-elementos.html, ¿vale?

6
00:00:33,130 --> 00:00:45,630
Y vamos a hacer como siempre, nos creamos una estructura HTML5, cambiamos el idioma y ponemos pseudo-elementos en hoja de texto, ¿vale?

7
00:00:46,009 --> 00:00:54,520
Y me voy a poner una carretera de nivel 1 con el mismo contenido, ¿vale?

8
00:00:54,520 --> 00:01:07,260
Y bueno, esto va a ser muy sencillo, ¿vale? Los pseudo-elementos se hacen de una forma muy parecida a pseudo-clases, ¿vale?

9
00:01:07,420 --> 00:01:12,799
Solo que se utilizan de una forma diferente, ¿vale?

10
00:01:12,920 --> 00:01:16,099
Vamos a ir viéndolo con un ejemplo y lo vamos a ir entendiendo mejor.

11
00:01:16,900 --> 00:01:20,980
Vamos a crearnos varios párrafos, ¿vale?

12
00:01:21,519 --> 00:01:23,180
Vamos a crearnos varios párrafos.

13
00:01:23,739 --> 00:01:26,840
En este caso nos vamos a crear unos cinco párrafos, por ejemplo.

14
00:01:27,799 --> 00:01:32,840
Para crearnos esos cinco párrafos, recuerda, le ponemos p, multiplicamos por cinco, ¿vale?

15
00:01:32,840 --> 00:01:40,480
Y le vamos a poner contexto Loren Ibsen, entonces ponemos el símbolo mayor que y escribimos Loren y le damos el tabulador, ¿vale?

16
00:01:40,900 --> 00:01:44,560
Y ahí tenemos los cinco párrafos.

17
00:01:44,859 --> 00:01:54,219
Entonces, el primer set de elementos que vamos a ver es aquel que modifica únicamente la primera letra de un párrafo, ¿vale?

18
00:01:54,719 --> 00:02:00,739
Entonces, le vamos a dar a este párrafo un id y ese id va a ser primera letra, ¿vale?

19
00:02:00,739 --> 00:02:11,439
Y ahora nos vamos a ir aquí al head, vamos a poner el elemento style y dentro vamos a utilizar el pseudo-elemento de primera letra, ¿vale?

20
00:02:12,639 --> 00:02:16,539
Pseudo-elemento, primera letra, ¿vale?

21
00:02:17,460 --> 00:02:26,560
Entonces, lo que vamos a hacer es elegir un párrafo, dentro de ese párrafo únicamente el que tiene el id de primera letra, ¿vale?

22
00:02:26,560 --> 00:02:31,039
Y para utilizar pseudo clases utilizábamos los dos puntos, ¿vale?

23
00:02:31,500 --> 00:02:35,780
Pues para utilizar pseudo elementos vamos a poner dos puntos dos veces, ¿vale?

24
00:02:36,180 --> 00:02:42,259
Y en este caso vamos a utilizar el pseudo elemento llamado first letter, ¿vale?

25
00:02:42,740 --> 00:02:51,340
Y aquí dentro vamos a poner, por ejemplo, un color rojo y un tamaño de letra de 30 píxeles, ¿vale?

26
00:02:51,340 --> 00:02:57,580
Y fijaros que aparece la L marcada como una L capital, ¿vale?

27
00:02:57,580 --> 00:03:00,620
Como una L mayúscula, en un color rojo, ¿vale?

28
00:03:03,020 --> 00:03:06,599
Podríamos también modificar el estilo de la primera línea, ¿vale?

29
00:03:06,780 --> 00:03:12,039
Nos vamos a ir al segundo párrafo y vamos a poner como id primera línea.

30
00:03:12,960 --> 00:03:18,180
Y vamos a seguir un protocolo parecido, ¿vale?

31
00:03:18,180 --> 00:03:22,300
En vez de ser el segundo elemento de primera letra, va a ser de primera línea.

32
00:03:22,900 --> 00:03:30,280
Y en vez de poner, elegir el párrafo primera letra, vamos a elegir el párrafo primera línea, ¿vale?

33
00:03:31,280 --> 00:03:35,919
Fijaros que como yo estoy manteniendo eso, me acaba de modificar la A de ese párrafo, ¿vale?

34
00:03:36,300 --> 00:03:42,900
Pero como yo no quiero la primera letra, sino que quiero la primera línea, quito letter, ¿vale?

35
00:03:43,460 --> 00:03:47,039
Y fijaros que ya me está proponiendo first line.

36
00:03:47,219 --> 00:03:52,439
Le doy y me ha modificado la primera línea, ¿vale?

37
00:03:52,900 --> 00:04:15,219
Fijaros que esto es curioso porque si aumentáis el tamaño de la ventana, la línea también aumenta.

38
00:04:15,219 --> 00:04:24,579
Por lo tanto, digamos que él cambia el estilo de la primera línea que se vea en pantalla, en el dimensionamiento del navegador.

39
00:04:24,579 --> 00:04:35,689
Y luego vamos a ver dos elementos que van a ser, que se van a llamar

40
00:04:35,689 --> 00:04:43,149
Dos pseudo-elementos que son after y before, o before y after

41
00:04:43,149 --> 00:04:48,870
Que van a servir para colocar contenido antes o después en un determinado caso

42
00:04:48,870 --> 00:04:53,410
Entonces, para eso vamos a hacer una cosa

43
00:04:53,410 --> 00:05:03,550
os vais a ir a Pixabay, ¿vale? Y dentro de Pixabay os vais a descargar una imagen, ¿vale?

44
00:05:03,589 --> 00:05:08,430
Una imagen de error. Yo os voy a enseñar la que yo me he descargado. Dejadme un segundito.

45
00:05:17,279 --> 00:05:23,459
Vale. Estáis viendo aquí mi ventana del navegador, ¿vale? Yo me he creado dentro de la carpeta

46
00:05:23,459 --> 00:05:26,519
donde tengo todos los códigos que estamos haciendo, me he creado una carpeta que se

47
00:05:26,519 --> 00:05:31,139
llama images vale y dentro de esta carpeta

48
00:05:31,139 --> 00:05:36,420
me he descargado una imagen como la que estáis viendo que es una imagen de

49
00:05:36,420 --> 00:05:42,360
error o algo así y lo importante es que modifique es el tamaño para que aparezca

50
00:05:42,360 --> 00:05:48,139
para que sea de 20 x 20 esto en windows lo podéis hacer de una forma muy rápida

51
00:05:48,139 --> 00:05:52,939
utilizando el paint vale para utilizar el paint simplemente le

52
00:05:52,939 --> 00:06:00,060
Le dais al botón derecho en la imagen y le dais a editar.

53
00:06:00,060 --> 00:06:03,959
O si no, también podéis darle aquí donde aparece...

54
00:06:03,959 --> 00:06:31,920
Le dais aquí, seleccionáis la imagen y aquí arriba donde marca mi cursor, si le dais aparecerán todos los programas que tenéis instalados.

55
00:06:31,920 --> 00:06:34,079
¿Vale? Y le podéis dar al pane

56
00:06:34,079 --> 00:06:36,379
¿Vale? Si le dais

57
00:06:36,379 --> 00:06:36,920
Al pane

58
00:06:36,920 --> 00:06:39,779
Os lo voy a poner para que

59
00:06:39,779 --> 00:06:40,959
Para que lo veáis

60
00:06:40,959 --> 00:06:44,540
¿Dónde está?

61
00:06:44,699 --> 00:06:44,939
Aquí

62
00:06:44,939 --> 00:06:49,459
¿Vale? Ahí estáis viendo el pane

63
00:06:49,459 --> 00:06:51,579
Veis la imagen ¿Vale?

64
00:06:52,360 --> 00:06:54,379
Entonces lo que le daréis sería esta opción

65
00:06:54,379 --> 00:06:55,639
Que pone cambiar tamaño

66
00:06:55,639 --> 00:06:58,079
Y dándole a cambiar tamaño

67
00:06:58,079 --> 00:07:02,240
O aparece la opción de cambiar por porcentaje

68
00:07:02,240 --> 00:07:04,279
por píxeles, ¿vale? Pues cambiéis por píxeles

69
00:07:04,279 --> 00:07:06,079
y ponéis 20 por 20, ¿vale?

70
00:07:07,699 --> 00:07:08,139
Simplemente

71
00:07:08,139 --> 00:07:10,480
simplemente eso, ¿vale?

72
00:07:10,819 --> 00:07:12,279
Entonces, yo ya tengo esa

73
00:07:12,279 --> 00:07:13,600
imagen como decía ahí

74
00:07:13,600 --> 00:07:16,199
y ahora lo que vamos a ver es cómo

75
00:07:16,199 --> 00:07:18,139
ponerla antes de un

76
00:07:18,139 --> 00:07:19,279
párrafo. Entonces,

77
00:07:20,339 --> 00:07:22,300
voy a poner a este párrafo de aquí

78
00:07:22,300 --> 00:07:23,740
le voy a poner una clase, ¿vale?

79
00:07:25,240 --> 00:07:26,699
Para poder reutilizar

80
00:07:26,699 --> 00:07:27,660
este

81
00:07:27,660 --> 00:07:30,459
este código, ¿vale?

82
00:07:30,459 --> 00:07:32,939
entonces voy a poner aquí

83
00:07:32,939 --> 00:07:35,279
error, ¿vale?

84
00:07:35,579 --> 00:07:37,819
recuerdo que para poner clase poníamos punto

85
00:07:37,819 --> 00:07:38,959
ponemos

86
00:07:38,959 --> 00:07:41,680
dos puntos y voy a poner before

87
00:07:41,680 --> 00:07:44,420
¿vale? para que aparezca antes del párrafo

88
00:07:44,420 --> 00:07:47,939
abro y cierro llave y lo que voy a poner va a ser

89
00:07:47,939 --> 00:07:51,339
la propiedad content

90
00:07:51,339 --> 00:07:53,860
¿vale? y dentro voy a poner url

91
00:07:53,860 --> 00:07:55,420
y aquí es para poner imágenes, ¿vale?

92
00:07:56,100 --> 00:07:57,300
para poner la imagen en sí

93
00:07:57,300 --> 00:07:59,879
entonces elijo dentro de images

94
00:07:59,879 --> 00:08:03,160
mi imagen que se llama error.png

95
00:08:03,160 --> 00:08:03,699
¿vale?

96
00:08:04,759 --> 00:08:06,959
voy a poner otra propiedad

97
00:08:06,959 --> 00:08:08,019
que es vertical align

98
00:08:08,019 --> 00:08:11,019
¿vale? que esto es para la alineación vertical

99
00:08:11,019 --> 00:08:12,319
que ya lo veremos más adelante

100
00:08:12,319 --> 00:08:14,699
y voy a poner middle para que vaya en el centro

101
00:08:14,699 --> 00:08:17,220
y la separación

102
00:08:17,220 --> 00:08:19,060
desde la derecha

103
00:08:19,060 --> 00:08:20,300
¿vale?

104
00:08:21,079 --> 00:08:23,060
que sea de 3 píxeles

105
00:08:23,060 --> 00:08:24,339
¿vale?

106
00:08:24,980 --> 00:08:26,199
al poner esto

107
00:08:26,199 --> 00:08:28,660
si actualizáis

108
00:08:28,660 --> 00:08:33,799
Ya veréis que aparece la imagen que vosotros habéis puesto ahí, ¿vale?

109
00:08:33,919 --> 00:08:39,559
Si no reducís la imagen a 20x20, aquí va a aparecer la imagen en su tamaño real, ¿vale?

110
00:08:39,620 --> 00:08:42,039
Y puede ser que no quede bien, ¿vale?

111
00:08:43,700 --> 00:08:47,659
Entonces, justo aquí debajo de ese elemento class, ¿vale?

112
00:08:48,059 --> 00:08:53,720
Después del elemento del inicio de la etiqueta del párrafo, vamos a poner la etiqueta spam, ¿vale?

113
00:08:55,679 --> 00:08:57,240
Pero sin contenido ni nada.

114
00:08:57,240 --> 00:09:04,240
Recuerdo que la diferencia entre poner un span y poner, por ejemplo, un párrafo es que el span iba poniendo uno al lado del otro, ¿vale?

115
00:09:04,899 --> 00:09:08,940
Sin embargo, los párrafos iban hacia abajo, ocupaban todo el ancho de la página, ¿vale?

116
00:09:09,559 --> 00:09:22,980
Entonces, lo que nosotros vamos a hacer ahora es que después de esa etiqueta span aparezca un texto, ¿vale?

117
00:09:22,980 --> 00:09:31,840
Entonces, nos vamos a ir y vamos a poner error de nuevo, ¿vale? De la clase error.

118
00:09:32,559 --> 00:09:39,759
Y ahora, queremos que después de ese spam, por lo tanto ponemos espacio spam, dos puntos, after, ¿vale?

119
00:09:40,480 --> 00:09:49,720
Y ahora, como contenido, queremos que aparezca un texto, pues ponemos entre comillas, atención, dos puntos, ¿vale?

120
00:09:49,720 --> 00:09:54,840
Ese texto queremos que aparezca en un color que va a ser rojo

121
00:09:54,840 --> 00:10:01,059
Queremos que tenga un tamaño que va a ser de 20 píxeles, ¿vale?

122
00:10:01,519 --> 00:10:04,519
Y vamos a ponerle font-weight, ¿vale?

123
00:10:04,919 --> 00:10:10,299
Que es para modificar la anchura del texto y lo vamos a poner en bold que es negrita, ¿vale?

124
00:10:11,639 --> 00:10:19,240
Y fijaros como me aparece justo después de la imagen, me aparece ese elemento, atención, ¿vale?

125
00:10:19,720 --> 00:10:27,759
Y fijaros si es curioso que yo puedo seleccionar todo el texto del párrafo, pero no puedo seleccionar este contenido, ¿vale?

126
00:10:27,799 --> 00:10:33,539
De atención, porque este contenido pertenece a la hoja de estilo, no pertenece al contenido de la web, ¿vale?

127
00:10:34,019 --> 00:10:44,799
Y lo bueno de esto es que yo, con ese párrafo error que ya tengo ahí creado, yo podría irme ahora al último párrafo, por ejemplo, y añadirlo a esa clase, ¿vale?

128
00:10:45,120 --> 00:10:48,620
Decir que también forma parte de la clase error, ¿vale?

129
00:10:48,620 --> 00:10:59,440
Y le vuelvo a añadir aquí, si solo le pongo el error, solo me aparece el símbolo, pero si le pongo el error y luego le pongo el spam, pues me aparecen las dos cosas, ¿vale?

130
00:11:00,779 --> 00:11:01,259
¿Ok?

131
00:11:02,919 --> 00:11:08,500
Esto es todo en cuanto a pseudo clase y pseudo elemento, ¿vale?

132
00:11:09,740 --> 00:11:11,399
Espero que os haya quedado claro.