1
00:00:00,430 --> 00:00:08,150
Bueno, pues ahora vamos a ver otra cosa, que son los pseudo-selectores, que es otro tipo de selectores un poco más avanzados aún.

2
00:00:08,730 --> 00:00:12,949
Y aquí vamos a distinguir dos elementos, pseudo-clase y pseudo-elemento.

3
00:00:14,589 --> 00:00:16,989
Vamos a empezar, vamos a abrir el brackets.

4
00:00:17,429 --> 00:00:24,089
Yo ya me he creado un archivo que como podéis ver lo he llamado pseudo.html.

5
00:00:24,089 --> 00:00:31,149
Y lo primero que voy a hacer es crearnos nuestra estructura de siempre

6
00:00:31,149 --> 00:00:33,990
Recuerdo, HTML 2.5

7
00:00:33,990 --> 00:00:36,789
Tabulador

8
00:00:36,789 --> 00:00:41,450
Y en el título vamos a poner

9
00:00:41,450 --> 00:00:46,420
Ejemplos de pseudo clases

10
00:00:46,420 --> 00:00:52,979
Y bueno, vamos a crearnos aquí una estructura de web sencilla

11
00:00:52,979 --> 00:00:55,240
Vamos a empezar con una cabecera H1

12
00:00:55,240 --> 00:01:03,280
que va a ser pseudo clases con hojas de estilo, ¿vale? CSS.

13
00:01:04,920 --> 00:01:08,420
Y en primer lugar vamos a trabajar con un tipo de pseudo clases, ¿vale?

14
00:01:08,700 --> 00:01:16,120
Por eso voy a poner una cabecera tipo 2, que van a ser pseudo clases orientadas a enlaces, ¿vale?

15
00:01:16,859 --> 00:01:21,640
Y para esto, pues como son orientadas a enlaces, pues lo primero que hay que hacer es crearnos un enlace, ¿vale?

16
00:01:21,640 --> 00:01:28,239
Entonces voy a poner, os voy a enseñar también otro atajo o forma de escribir rápido utilizando Emmet, ¿vale?

17
00:01:28,239 --> 00:01:38,019
Si queréis poner un enlace, podéis poner una A y entre llaves poner el título o el texto que queréis que sea el enlace, ¿vale?

18
00:01:38,340 --> 00:01:41,480
Por ejemplo, yo pondría esto es un enlace, ¿vale?

19
00:01:41,739 --> 00:01:44,579
Y ahora después de las llaves le doy al tabulador, ¿vale?

20
00:01:45,079 --> 00:01:50,260
Y fijaros que ya me crea directamente el enlace y me aparece la opción de HR, ¿vale?

21
00:01:50,260 --> 00:01:52,319
por lo que yo ahora le pondría

22
00:01:52,319 --> 00:01:54,099
almohadillas, vale

23
00:01:54,099 --> 00:01:56,799
ok, entonces

24
00:01:56,799 --> 00:01:57,819
vamos a ver

25
00:01:57,819 --> 00:02:00,680
pseudo clase orientada a enlaces

26
00:02:00,680 --> 00:02:02,560
como estos son hojas de estilo

27
00:02:02,560 --> 00:02:04,260
nos vamos a ir a la parte del head

28
00:02:04,260 --> 00:02:06,200
que vamos a poner style, vale

29
00:02:06,200 --> 00:02:07,620
uy, y no

30
00:02:07,620 --> 00:02:10,560
style, ahí

31
00:02:10,560 --> 00:02:11,840
vale

32
00:02:11,840 --> 00:02:14,539
y aquí dentro es donde vamos ahora

33
00:02:14,539 --> 00:02:16,139
a poner nuestro estilo, entonces

34
00:02:16,139 --> 00:02:17,759
voy a poner un comentario

35
00:02:17,759 --> 00:02:20,500
que va a ser pseudo

36
00:02:20,500 --> 00:02:22,560
clases orientadas

37
00:02:22,560 --> 00:02:23,539
a enlace

38
00:02:23,539 --> 00:02:25,520
¿vale?

39
00:02:26,080 --> 00:02:27,960
y lo primero que voy a hacer es

40
00:02:27,960 --> 00:02:30,659
cambiar el color de un

41
00:02:30,659 --> 00:02:31,560
enlace ¿vale?

42
00:02:32,240 --> 00:02:34,560
entonces para cambiar el color de un enlace lo vamos a hacer

43
00:02:34,560 --> 00:02:36,800
siguiendo la siguiente pseudo clase

44
00:02:36,800 --> 00:02:38,319
que es a dos puntos

45
00:02:38,319 --> 00:02:40,500
link ¿vale?

46
00:02:41,099 --> 00:02:42,719
y entre llaves por ejemplo

47
00:02:42,719 --> 00:02:44,900
a este enlace le voy a poner el color verde

48
00:02:44,900 --> 00:02:46,939
fijaros que cuando pongo color green me va a cambiar

49
00:02:46,939 --> 00:02:56,699
el color de aquí azul. Ya veis que el enlace ha cambiado. Entonces esto sería, lo voy

50
00:02:56,699 --> 00:03:08,669
a poner con un comentario, enlace antes de clicar, antes de hacer clic. Luego voy a poner

51
00:03:08,669 --> 00:03:14,430
todas las pseudo clases que vamos a meter los enlaces y luego las vamos probando, porque

52
00:03:14,430 --> 00:03:16,469
que ya el resto no los vamos a poder ver directamente.

53
00:03:17,530 --> 00:03:22,449
La siguiente va a ser el enlace una vez que hayamos hecho clic.

54
00:03:22,569 --> 00:03:25,669
Una vez que ese enlace ya sea visitado, cambia de color.

55
00:03:28,810 --> 00:03:30,009
Enlace una vez hecho clic.

56
00:03:30,229 --> 00:03:32,569
Y para eso, pues, a dos puntos, visita.

57
00:03:34,330 --> 00:03:37,810
Y lo mismo en este caso, porque vamos a poner el color, pues yo qué sé.

58
00:03:41,650 --> 00:03:42,349
Rojo oscuro.

59
00:03:42,349 --> 00:03:45,310
Luego vamos a poner

60
00:03:45,310 --> 00:03:47,590
Una pseudo clase

61
00:03:47,590 --> 00:03:48,289
¿Vale?

62
00:03:48,849 --> 00:03:50,729
Para estilo

63
00:03:50,729 --> 00:03:53,250
Al pasar

64
00:03:53,250 --> 00:03:54,789
El ratón por encima

65
00:03:54,789 --> 00:03:55,490
¿Vale?

66
00:03:55,729 --> 00:03:58,009
Es decir, para que cambie cuando pasamos el ratón por encima

67
00:03:58,009 --> 00:03:58,870
Entonces ponemos A

68
00:03:58,870 --> 00:04:00,590
Y vamos a poner over

69
00:04:00,590 --> 00:04:01,050
¿Vale?

70
00:04:02,949 --> 00:04:04,310
Y aquí, pues por ejemplo

71
00:04:04,310 --> 00:04:06,150
Lo que vamos a hacer es aumentar el

72
00:04:06,150 --> 00:04:08,750
Aumentar el tamaño de la fuente

73
00:04:08,750 --> 00:04:09,949
Por ejemplo

74
00:04:09,949 --> 00:04:10,370
¿Vale?

75
00:04:10,650 --> 00:04:12,310
Vamos a ponerlo a 20 píxeles

76
00:04:12,310 --> 00:04:15,590
y aparte le vamos a poner un color de fondo

77
00:04:15,590 --> 00:04:18,610
le vamos a poner

78
00:04:18,610 --> 00:04:21,009
amarillo

79
00:04:21,009 --> 00:04:26,730
y por último

80
00:04:26,730 --> 00:04:29,089
vamos a poner

81
00:04:29,089 --> 00:04:33,689
otra pseudo clase que es cuando

82
00:04:33,689 --> 00:04:36,970
hemos hecho clic pero mantenemos el botón

83
00:04:36,970 --> 00:04:39,490
el dedo pulsado, es decir

84
00:04:39,490 --> 00:04:42,569
mientras estamos haciendo ese proceso de clic

85
00:04:42,569 --> 00:04:44,970
Que aquí en los comentarios

86
00:04:44,970 --> 00:04:46,709
Pues vamos a poner el estilo

87
00:04:46,709 --> 00:04:47,750
Al pulsar el botón

88
00:04:47,750 --> 00:04:52,180
Y pondríamos

89
00:04:52,180 --> 00:04:54,199
El botón más bien es del lado

90
00:04:54,199 --> 00:04:57,350
Y pondríamos a

91
00:04:57,350 --> 00:04:58,829
Active

92
00:04:58,829 --> 00:05:00,910
Y aquí ponemos color

93
00:05:00,910 --> 00:05:01,870
Black

94
00:05:01,870 --> 00:05:07,300
Ya lo tenemos todo, guardamos

95
00:05:07,300 --> 00:05:09,779
Y fijaros, si yo ahora pongo

96
00:05:09,779 --> 00:05:12,000
Ahora mismo el color verde

97
00:05:12,000 --> 00:05:13,279
Ya lo veis que sería esta parte

98
00:05:13,279 --> 00:05:15,500
Si yo ahora pongo el ratón encima

99
00:05:15,500 --> 00:05:18,459
Tiene que aumentar la fuente y poner un color de fondo

100
00:05:18,459 --> 00:05:20,060
¿Vale? Fijaros

101
00:05:20,060 --> 00:05:23,319
Aumenta la fuente y aparece un color amarillo

102
00:05:23,319 --> 00:05:25,379
Simplemente al pasar el ratón encima

103
00:05:25,379 --> 00:05:25,759
¿Vale?

104
00:05:26,699 --> 00:05:28,579
Y si yo hago click

105
00:05:28,579 --> 00:05:30,600
Tiene que ponerse en negro

106
00:05:30,600 --> 00:05:33,060
¿Vale?

107
00:05:33,779 --> 00:05:35,399
Fijaros que aparece en negro

108
00:05:35,399 --> 00:05:36,759
¿Ok?

109
00:05:38,220 --> 00:05:39,980
Y si yo ahora voy al enlace

110
00:05:39,980 --> 00:05:43,519
Al visitar el enlace se queda en un rojo oscuro

111
00:05:43,519 --> 00:05:45,199
¿Lo veis?

112
00:05:45,199 --> 00:05:48,540
Ya sería como un enlace visitado, ¿vale?

113
00:05:51,029 --> 00:05:54,610
Importante, estas cuatro clases no hay por qué utilizarlas las cuatro.

114
00:05:54,709 --> 00:05:57,189
Es habitual utilizarlas las cuatro, pero no tiene por qué.

115
00:05:57,790 --> 00:06:02,050
En caso de utilizarlas las cuatro, siempre es recomendable utilizarlas en el mismo orden, ¿vale?

116
00:06:02,689 --> 00:06:05,490
Link, Visit, Over y Active, ¿vale?

117
00:06:06,910 --> 00:06:11,889
Y esto no es solo para enlaces, podría valer para cualquier otro elemento, ¿vale?

118
00:06:11,889 --> 00:06:15,089
Vamos a poner, por ejemplo, un par de desartos de línea aquí, ¿vale?

119
00:06:15,089 --> 00:06:41,899
Y vamos a poner justo debajo un botón, ¿vale? El botón que ponga, por ejemplo, pulsa aquí, ¿vale? Y de la misma forma vamos a hacer ahora, pongo aquí comentario, pseudo clases orientadas a cualquier elemento, ¿vale?

120
00:06:41,899 --> 00:06:49,180
Y en este caso, como lo que vamos a coger es un botón, pues voy a poner, por ejemplo, el elemento, la pseudoclase hover, ¿vale?

121
00:06:49,699 --> 00:06:52,839
Y lo que voy a hacer es poner un color rojo, ¿vale?

122
00:06:53,180 --> 00:06:59,519
Y de nuevo, pues aumento la fuente, o aquí no voy a aumentar la fuente, ¿vale?

123
00:07:00,560 --> 00:07:02,980
Voy a aumentar la fuente cuando haga clic en el botón, ¿vale?

124
00:07:03,040 --> 00:07:10,560
Pues pongo bold button active y aquí pongo font size 25 píxeles.

125
00:07:11,899 --> 00:07:22,660
Fijaros que cuando yo paso el ratón encima, me cambia a rojo, y cuando hago clic, me aumenta a 25 píxeles el texto.

126
00:07:25,720 --> 00:07:28,720
Funciona, por lo tanto, perfectamente.

127
00:07:31,360 --> 00:07:40,360
Ahora vamos a continuar haciendo una pseudo clase, pero en este caso orientada a formularios.

128
00:07:40,360 --> 00:07:55,420
¿Vale? Entonces nos vamos a venir aquí y vamos a poner pseudoclases orientadas a formularios.

129
00:07:55,519 --> 00:08:00,040
¿Vale? Y antes de eso, pues tenemos que hacer nuestro formulario en sí.

130
00:08:00,379 --> 00:08:05,399
¿Vale? Voy a ponerme aquí otro título H2 que lo distinga.

131
00:08:05,399 --> 00:08:12,100
¿Vale? Pseudoclases orientadas a formularios.

132
00:08:12,100 --> 00:08:13,680
vale

133
00:08:13,680 --> 00:08:16,160
y pues vamos al lío

134
00:08:16,160 --> 00:08:16,980
en primer lugar

135
00:08:16,980 --> 00:08:22,170
ponemos form, vale, y dentro del action

136
00:08:22,170 --> 00:08:23,689
lo vamos a dejar sin nada, vale

137
00:08:23,689 --> 00:08:25,209
lo vamos a dejar limpio

138
00:08:25,209 --> 00:08:27,009
y ahora, entre los dos

139
00:08:27,009 --> 00:08:30,110
la etiqueta de cierre y la de inicio de form

140
00:08:30,110 --> 00:08:32,070
será donde pongamos todo el formulario

141
00:08:32,070 --> 00:08:34,029
vale, entonces vamos a empezar

142
00:08:34,029 --> 00:08:34,590
poniendo

143
00:08:34,590 --> 00:08:37,269
una etiqueta label, vale

144
00:08:37,269 --> 00:08:39,769
que vamos a poner aquí como

145
00:08:39,769 --> 00:08:41,830
identificador de la etiqueta

146
00:08:41,830 --> 00:08:42,429
su nombre

147
00:08:42,429 --> 00:08:48,909
Y esto va a estar relacionado o asociado, mejor dicho, a una input, ¿vale?

148
00:08:49,169 --> 00:08:51,470
Una input de tipo texto, como ahí aparece.

149
00:08:52,370 --> 00:08:58,269
Y recuerdo que en ese input hay que ponerle el mismo id que pusimos en el for del label, ¿vale?

150
00:08:58,669 --> 00:08:59,250
Del label.

151
00:09:00,629 --> 00:09:02,169
Para que así su nombre, ¿vale?

152
00:09:03,090 --> 00:09:05,450
Vamos a poner un tamaño, por ejemplo, de 50.

153
00:09:07,110 --> 00:09:07,590
Así.

154
00:09:08,210 --> 00:09:10,610
Y ahora un par de saltos de línea.

155
00:09:10,610 --> 00:09:20,049
Ahora vamos a copiarnos todo esto un par de veces

156
00:09:20,049 --> 00:09:20,750
¿Vale?

157
00:09:21,289 --> 00:09:25,570
Para que sea más fácil, tardemos menos en hacer formular

158
00:09:25,570 --> 00:09:28,710
Y en el primer caso

159
00:09:28,710 --> 00:09:31,450
Donde hemos puesto su nombre

160
00:09:31,450 --> 00:09:33,950
Pues vamos a poner su apellido

161
00:09:33,950 --> 00:09:34,789
¿Vale?

162
00:09:35,250 --> 00:09:36,950
Aquí vamos a poner apellido

163
00:09:36,950 --> 00:09:42,220
Esto lo vamos a pegar aquí

164
00:09:42,220 --> 00:09:53,220
y ahora aquí vamos a poner su correo, y aquí ponemos e-mail, y en el tipo, aquí si es importante, ¿vale?

165
00:09:53,220 --> 00:09:57,679
En el tipo hay que cambiarlo, hay que poner e-mail, ¿vale?

166
00:09:59,830 --> 00:10:03,549
¿Qué más, qué más? Vamos a poner también unos radiobutons, ¿vale?

167
00:10:03,549 --> 00:10:13,789
Entonces vamos a poner aquí género, vamos a poner dos puntos y un salto de línea, ¿vale?

168
00:10:14,169 --> 00:10:19,649
Y vamos a poner un input de tipo, en lugar de texto va a ser radio, ¿vale?

169
00:10:21,070 --> 00:10:24,529
El nombre de la variable va a ser género, ¿vale?

170
00:10:26,659 --> 00:10:31,580
Este input en concreto va a tener un id que se llama hombre y un valor,

171
00:10:31,580 --> 00:10:33,879
que es lo que vamos a guardar

172
00:10:33,879 --> 00:10:35,500
en la variable género que va a poner

173
00:10:35,500 --> 00:10:36,559
masculino

174
00:10:36,559 --> 00:10:37,879
¿vale?

175
00:10:39,139 --> 00:10:41,659
y debajo vamos a poner el label

176
00:10:41,659 --> 00:10:43,820
como dentro del

177
00:10:43,820 --> 00:10:45,840
for tenemos que poner lo mismo que hay en el id

178
00:10:45,840 --> 00:10:47,360
¿vale? en este caso va a ser

179
00:10:47,360 --> 00:10:51,259
hombre y aquí

180
00:10:51,259 --> 00:10:51,919
vamos a poner

181
00:10:51,919 --> 00:10:54,500
masculino

182
00:10:54,500 --> 00:10:57,340
y todo esto lo vamos a

183
00:10:57,340 --> 00:11:02,320
copiar y lo vamos a

184
00:11:02,320 --> 00:11:04,320
pegar debajo y lo vamos a hacer igual

185
00:11:04,320 --> 00:11:06,279
pero en vez de para hombre vamos a poner

186
00:11:06,279 --> 00:11:20,440
mujer y donde pone masculino. Y ahora esto, tal y como lo tenemos, lo vamos a copiar,

187
00:11:20,539 --> 00:11:28,600
¿vale? Para hacer un checkbox, ¿vale? Lo que eran las cajitas donde podíamos rellenarlo,

188
00:11:28,679 --> 00:11:34,720
¿vale? Yo lo he copiado. Bueno, voy a poner aquí dos saltos de línea. Eso, ¿eh? Y ahora

189
00:11:34,720 --> 00:11:41,320
aquí vamos a poner, por ejemplo, pasatiempo, ¿vale? En el tipo ya no va a ser radio, ¿vale?

190
00:11:41,320 --> 00:11:45,299
Va a ser una checkbox, fijaros cómo ha cambiado, era una cajita, ¿vale?

191
00:11:46,419 --> 00:11:54,860
En el nombre aquí vamos a poner pasatiempo1, vamos a poner hobby, que es más corto, hobby1.

192
00:11:56,059 --> 00:12:00,299
En el id de este hobby vamos a poner, por ejemplo, hiking, ¿vale?

193
00:12:00,840 --> 00:12:09,240
Y en el valor lo que se va a guardar es la variable pasatiempo, que va a ser en este caso excursionismo, ¿vale?

194
00:12:09,240 --> 00:12:36,950
O vamos a ponerlo más corto, ponemos en el id music y aquí vamos a poner value música, vale, y este valor de música lo vamos a copiar aquí, vale, y el id de music hay que copiarlo en el for, que no se nos olvide, vale, y hacemos lo mismo para el segundo checkbox, el tipo lo ponemos en checkbox, en name vamos a poner hobby2,

195
00:12:36,950 --> 00:12:40,549
en el id vamos a poner

196
00:12:40,549 --> 00:12:43,850
yo que sé

197
00:12:43,850 --> 00:12:45,929
reading, ¿vale?

198
00:12:48,080 --> 00:12:50,399
ese id lo vamos a poner en el for

199
00:12:50,399 --> 00:12:51,100
¿vale?

200
00:12:52,100 --> 00:12:54,360
y vamos a poner como value la lectura

201
00:12:54,360 --> 00:12:56,159
¿vale?

202
00:12:56,460 --> 00:12:58,139
y aquí lectura

203
00:12:58,139 --> 00:13:00,019
vale

204
00:13:00,019 --> 00:13:01,799
pues entonces, vamos a fijarnos

205
00:13:01,799 --> 00:13:03,679
cuando nosotros nos vamos a nuestro formulario

206
00:13:03,679 --> 00:13:06,100
y yo hago click, por ejemplo, en nombre

207
00:13:06,100 --> 00:13:07,600
fijaros que

208
00:13:07,600 --> 00:13:10,659
aparece un recuadrito

209
00:13:10,659 --> 00:13:13,899
negro, ¿vale? Si hago clic en apellido

210
00:13:13,899 --> 00:13:16,559
me pasa lo mismo en apellido, algo parecido, ¿no?

211
00:13:17,080 --> 00:13:19,659
Vale, pues nosotros podemos gestionar entre otras muchas cosas

212
00:13:19,659 --> 00:13:22,340
todo esto. Entonces nos vamos a ir a

213
00:13:22,340 --> 00:13:25,600
aquí donde habíamos dicho pseudo clase orientada

214
00:13:25,600 --> 00:13:28,519
a formulario y vamos a empezar a ver

215
00:13:28,519 --> 00:13:31,659
elementos, ¿vale? En primer lugar lo que vamos a

216
00:13:31,659 --> 00:13:35,379
hacer es destacar

217
00:13:35,379 --> 00:13:46,940
¿Vale? Aquellos elementos habilitados, ¿vale? Recuerdo que había una propiedad que era, por defecto, todos los elementos de un formulario que están en enable, pero había una propiedad que era disable, ¿vale?

218
00:13:47,860 --> 00:14:05,590
Entonces, vamos a, por ejemplo, a los elementos habilitados, que son input, ¿vale? Input, y vamos a poner enable, ¿vale? Vamos a ponerle un color de fondo, un background, ¿vale? Que sea amarillo oscuro, amarillo claro, ¿vale?

219
00:14:05,590 --> 00:14:10,960
light yellow

220
00:14:10,960 --> 00:14:12,879
¿vale? fijaros que ahora

221
00:14:12,879 --> 00:14:14,500
las tres cajitas

222
00:14:14,500 --> 00:14:15,759
de input

223
00:14:15,759 --> 00:14:18,879
me han aparecido en un amarillo clarito

224
00:14:18,879 --> 00:14:19,600
¿vale?

225
00:14:21,179 --> 00:14:21,980
ahora

226
00:14:21,980 --> 00:14:24,179
vamos a hacer

227
00:14:24,179 --> 00:14:26,139
destacar

228
00:14:26,139 --> 00:14:28,659
el elemento seleccionado ¿vale?

229
00:14:30,120 --> 00:14:32,220
o el campo seleccionado

230
00:14:32,220 --> 00:14:34,679
¿cómo lo hacemos eso?

231
00:14:34,679 --> 00:14:35,740
pues de nuevo con input

232
00:14:35,740 --> 00:14:38,279
y ahora entre dos puntos en vez de poner

233
00:14:38,279 --> 00:14:40,220
enable vamos a poner el focus

234
00:14:40,220 --> 00:14:42,159
¿vale?

235
00:14:42,480 --> 00:14:43,960
entonces el elemento seleccionado

236
00:14:43,960 --> 00:14:46,000
el elemento enfocado ¿vale?

237
00:14:46,460 --> 00:14:48,299
y entonces en este caso vamos a poner background

238
00:14:48,299 --> 00:14:48,860
color

239
00:14:48,860 --> 00:14:51,360
yellow

240
00:14:51,360 --> 00:14:52,799
¿vale?

241
00:14:54,139 --> 00:14:56,299
entonces fijaros que si yo ahora hago

242
00:14:56,299 --> 00:14:57,700
clic en apellido

243
00:14:57,700 --> 00:15:01,909
o en email todos me aparecen

244
00:15:01,909 --> 00:15:03,750
en un amarillo más fuerte ¿vale?

245
00:15:06,059 --> 00:15:06,799
más opciones

246
00:15:06,799 --> 00:15:11,200
vamos a coger el apellido y vamos a poner

247
00:15:11,200 --> 00:15:18,460
ponerle la etiqueta Disable, ¿vale? Para deshabilitarlo, ¿vale? Fijaros que cuando lo pongo aparece

248
00:15:18,460 --> 00:15:23,559
como en un gris así clarito, ¿vale? Si yo hago clic no me deja hacer nada. Pues ahora

249
00:15:23,559 --> 00:15:28,340
nos vamos a venir aquí, vamos a poner Input, ¿vale? Bueno, primero voy a poner unos comentarios

250
00:15:28,340 --> 00:15:35,799
que indique qué es esto, ¿vale? Destacar elementos deshabilitados, ¿vale? Ponemos

251
00:15:35,799 --> 00:15:43,620
simple y como pseudo clase disabled vale y aquí lo que vamos a hacer por ejemplo va a ser poner

252
00:15:43,620 --> 00:15:52,580
un color de fondo va a tirar un color que va a ser el gris vale pues un gris oscuro para que

253
00:15:52,580 --> 00:15:59,700
destaque con respecto al otro vale fijaros que ya se ha puesto gris oscuro y aparte vamos a poner

254
00:15:59,700 --> 00:16:04,899
que el cursor, el cursor del ratón no esté permitido, ¿vale? ¿Qué quiere decir esto?

255
00:16:04,980 --> 00:16:11,240
Pues fijaros, si yo paso el ratón, aquí me ha cambiado a esta línea vertical como

256
00:16:11,240 --> 00:16:16,240
si me dejara introducir texto, pero si me voy ahora a apellido, fijaros que ahora el

257
00:16:16,240 --> 00:16:21,700
cursor aparece con el símbolo de prohibido, ¿vale? Para que veáis hasta qué cosas se

258
00:16:21,700 --> 00:16:29,820
pueden hacer con hojas de texto. Vale, vamos por ejemplo ahora en el caso que pusiéramos

259
00:16:29,820 --> 00:16:34,899
el campo del contenido email incorrecto, ¿vale? Recuerdo que eso ocurría cuando no poníamos

260
00:16:34,899 --> 00:16:39,500
arroba algo punto com o arroba algo punto eso, lo que sea, ¿vale? Entonces, aquí vamos

261
00:16:39,500 --> 00:16:50,379
a combinar un selector por atributo, ¿vale? Con una pseudo clase, ¿vale? Entonces, destaca

262
00:16:50,379 --> 00:16:53,139
cuando el correo

263
00:16:53,139 --> 00:16:54,279
es incorrecto

264
00:16:54,279 --> 00:16:56,580
el formato de correo

265
00:16:56,580 --> 00:16:57,200
¿vale?

266
00:16:58,879 --> 00:17:02,259
es incorrecto

267
00:17:02,259 --> 00:17:03,600
y pongo mezcla

268
00:17:03,600 --> 00:17:04,940
selector

269
00:17:04,940 --> 00:17:07,039
por atributos

270
00:17:07,039 --> 00:17:10,319
con pseudo clase

271
00:17:10,319 --> 00:17:12,460
¿vale? entonces fijaros

272
00:17:12,460 --> 00:17:14,220
en primer lugar

273
00:17:14,220 --> 00:17:15,619
ponemos el elemento que es input

274
00:17:15,619 --> 00:17:18,200
luego ponemos el selector por atributos que era

275
00:17:18,200 --> 00:17:19,819
type ¿vale?

276
00:17:19,819 --> 00:17:30,519
Y concretamente vamos a elegir el tipo IME. ¿Vale? Y luego vamos a poner dos puntos para poner las autoclases. En este caso, invalid. ¿Vale? Cuando el correo es invalid.

277
00:17:30,940 --> 00:17:41,359
¿Y qué vamos a hacer? Pues vamos a poner un borde, ¿vale? De 5 píxeles que sea sólido y que sea rojo. ¿Vale?

278
00:17:41,359 --> 00:17:53,980
Entonces, fijaros, si yo ahora me vengo aquí y pongo Pepe, fijaros que como ahora mismo el correo que he puesto no es correcto, ya lo tengo un borde rojo inválido, ¿vale?

279
00:17:54,440 --> 00:18:03,880
Entonces, si yo ahora pongo arroba Pepe, ¿vale? En cuanto ya pongo arroba Pepe o en cuanto pongo un carácter, él ya lo da por bueno, ¿vale?

280
00:18:04,480 --> 00:18:11,920
Si yo ahora pusiera un punto, también me lo daría por malo, tendría que terminarlo en punto algo, ¿vale?

281
00:18:11,920 --> 00:18:33,579
¿Ok? Aquí tenéis un ejemplo más de una pseudo clase. Y por último, nos vamos a ir a los dos últimos elementos del formulario, que son el radio button y el checkbox button, ¿vale? Los dos. Y lo que vamos a hacer es mezclar la pseudo clase con selectores adyacentes, ¿vale? Y con selector de atributos.

282
00:18:33,579 --> 00:18:50,049
Entonces, en este caso vamos a poner input, vamos a poner lo que vamos a hacer antes, perdón, destacamos el label asociado al elemento seleccionado, ¿vale?

283
00:18:50,289 --> 00:18:56,930
Es decir, vamos a destacar la palabra masculino, vamos a destacar la palabra femenino, vamos a destacar la palabra música o la palabra lectura.

284
00:18:57,390 --> 00:19:02,829
Recuerdo que masculino, femenino, música y lectura son elementos label, ¿vale?

285
00:19:02,829 --> 00:19:08,970
El elemento input realmente sería el puntito o el cuadradito, ¿vale?

286
00:19:09,349 --> 00:19:32,150
Entonces, para esto, como digo, mezclamos pseudoclases con selector por atributo y selector adyacente, ¿vale?

287
00:19:32,869 --> 00:19:33,730
Entonces, fijaros.

288
00:19:33,930 --> 00:19:35,470
En primer lugar pondríamos input.

289
00:19:36,029 --> 00:19:37,670
Luego pondríamos el selector por atributo.

290
00:19:37,670 --> 00:19:41,769
En este caso, es TiempoTypeRadio.

291
00:19:42,650 --> 00:19:49,369
Y luego pondríamos el selector adyacente, que en este caso sería Check, ¿vale?

292
00:19:49,509 --> 00:19:50,690
De elemento seleccionado.

293
00:19:50,869 --> 00:19:55,869
Y ahora pondríamos el selector adyacente, porque nosotros lo que queremos es el elemento Label

294
00:19:55,869 --> 00:19:59,130
que hay justo después de ese botón seleccionado, ¿vale?

295
00:19:59,490 --> 00:20:00,710
¿Y qué le vamos a hacer?

296
00:20:00,829 --> 00:20:06,049
Pues le vamos a poner, por ejemplo, un color de fondo que sea azul, ¿vale?

297
00:20:06,049 --> 00:20:29,500
Y un color de fuente que sea blanco, ¿vale? Aquí hay un punto y como aquí no se me ha olvidado. Y de la misma forma lo hacemos para el siguiente elemento, ¿vale? Input en tipo, vamos a poner checkbox, ¿vale?

298
00:20:29,500 --> 00:20:31,819
volvemos a poner check

299
00:20:31,819 --> 00:20:36,640
y después del check ponemos lo mismo

300
00:20:36,640 --> 00:20:38,720
label, vale, abrimos

301
00:20:38,720 --> 00:20:40,339
y cerramos llave y en este caso

302
00:20:40,339 --> 00:20:42,400
únicamente vamos a cambiar el color

303
00:20:42,400 --> 00:20:44,400
lo vamos a poner en rojo y vamos a cambiar

304
00:20:44,400 --> 00:20:46,220
el tamaño del puente, vale

305
00:20:46,220 --> 00:20:48,519
por ejemplo, vamos a poner

306
00:20:48,519 --> 00:20:49,220
20 piso

307
00:20:49,220 --> 00:20:52,299
vale, y fijaros

308
00:20:52,299 --> 00:20:54,059
que si yo ahora marco masculino

309
00:20:54,059 --> 00:20:56,640
el label

310
00:20:56,640 --> 00:20:58,519
me ha cambiado, si marco femenino

311
00:20:58,519 --> 00:21:00,660
el label me ha cambiado, para el

312
00:21:00,660 --> 00:21:16,519
¿Y en el caso de los pasatiempos? Al hacer clic en música me cambia y al hacer clic en lectura me cambia, ¿vale? Y me vuelve al modo por defecto. ¿Ok? Esto ya digo, en cuanto a pseudoclases orientadas a formularios.

313
00:21:16,519 --> 00:21:37,099
Vamos a continuar viendo tipos de pseudoclases. Para ello lo que vamos a hacer en primer lugar es ver cómo modificar, cómo utilizando pseudoclases podemos modificar el primer elemento de un conjunto de elementos, por ejemplo, o el último elemento.

314
00:21:37,099 --> 00:21:47,480
Entonces, lo primero que vamos a hacer es un contenedor, ¿vale? Es decir, un elemento div, que ya dijimos que era como una caja que podía tener diferentes elementos dentro, ¿vale?

315
00:21:48,380 --> 00:21:57,119
Y dentro de este elemento div lo que vamos a hacer es crear cuatro párrafos, ¿vale? Con texto Lorem Ipsum.

316
00:21:57,119 --> 00:22:09,680
Pero, para enseñaros también cómo utilizar la extensión M de una forma rápida y que os agilice la escritura, el proceso de la escritura de código, ¿vale?

317
00:22:10,119 --> 00:22:17,920
Pues voy a enseñar cómo hacer esto de una forma muy rápida, ¿vale? O bastante más rápida de lo que venimos haciendo, ¿vale?

318
00:22:18,700 --> 00:22:25,039
Entonces, lo que vamos a hacer es que vamos a poner P, porque es el elemento que queremos poner, ¿vale? Un párrafo.

319
00:22:25,039 --> 00:22:28,619
Vamos a poner un por cuatro, ¿vale?

320
00:22:28,700 --> 00:22:32,079
Porque queremos hacer cuatro párrafos diferentes

321
00:22:32,079 --> 00:22:34,819
Y vamos a poner el símbolo de mayor que

322
00:22:34,819 --> 00:22:38,720
Que esto significa que dentro de este párrafo aparezca lo siguiente

323
00:22:38,720 --> 00:22:40,059
¿Y qué queremos que aparezca?

324
00:22:40,500 --> 00:22:43,839
Pues un texto lorem ipsum, ¿vale?

325
00:22:44,019 --> 00:22:46,619
Entonces ponemos lorem con la L en mayúscula

326
00:22:46,619 --> 00:22:49,279
Y le damos ahora al tabulador, ¿vale?

327
00:22:49,279 --> 00:22:55,839
Y fijaros que automáticamente aparecen cuatro párrafos con texto Lorem Ipsum, ¿vale?

328
00:22:57,839 --> 00:23:05,380
Lo que vamos a hacer es que a este elemento id le vamos a asignar un identificador que va a ser posición elemento, ¿vale?

329
00:23:05,859 --> 00:23:06,640
Posición elemento.

330
00:23:07,500 --> 00:23:13,920
Y ahora vamos a ir a modificar esas dos clases basado en la posición o el número del elemento, ¿vale?

331
00:23:13,920 --> 00:23:17,380
Nos vamos a ir aquí a la parte de Style, ¿vale?

332
00:23:17,460 --> 00:23:18,319
Del elemento Style

333
00:23:18,319 --> 00:23:20,319
Vamos a poner unos comentarios

334
00:23:20,319 --> 00:23:22,180
Que vamos a poner en primer lugar

335
00:23:22,180 --> 00:23:23,880
Eh...

336
00:23:23,880 --> 00:23:24,819
Pseudoclases

337
00:23:24,819 --> 00:23:29,900
Eh...

338
00:23:29,900 --> 00:23:31,539
Sé que estaba poniendo Pseudoclases

339
00:23:31,539 --> 00:23:37,759
Orientada a la posición o número de elementos

340
00:23:37,759 --> 00:23:38,319
¿Vale?

341
00:23:39,539 --> 00:23:42,339
Y bueno, y aquí debajo vamos a poner una carretera H2

342
00:23:42,339 --> 00:23:44,279
Para que todo quede un poco más ordenado, ¿vale?

343
00:23:44,799 --> 00:23:45,240
Eh...

344
00:23:45,240 --> 00:23:46,140
Pseudoclases

345
00:23:46,140 --> 00:23:50,960
A la posición

346
00:23:50,960 --> 00:23:54,039
posición o número de elemento, ¿vale?

347
00:23:54,880 --> 00:24:01,539
Entonces, en primer lugar vamos a modificar solo el primer párrafo que está contenido dentro de ese elemento div

348
00:24:01,539 --> 00:24:03,759
llamado posición elemento, ¿vale?

349
00:24:04,359 --> 00:24:08,519
Entonces, para eso lo que vamos a hacer es lo siguiente.

350
00:24:09,140 --> 00:24:13,859
Vamos a coger y vamos a poner en primer lugar elemento div, ¿vale?

351
00:24:14,700 --> 00:24:19,839
Como vamos a coger un elemento div en concreto, que es el que tiene el id posición elemento,

352
00:24:19,839 --> 00:24:25,319
Pues ponemos la almohadilla y luego posición elemento, ¿vale?

353
00:24:26,259 --> 00:24:33,960
Y luego ponemos un espacio para decirle que queremos el elemento, a los elementos párrafos, ¿vale?

354
00:24:35,240 --> 00:24:37,799
Esto sería ahora mismo sin pseudo clase.

355
00:24:37,960 --> 00:24:40,619
Si nosotros hiciéramos esta modificación, fijaros, ¿vale?

356
00:24:41,079 --> 00:24:45,059
Voy a poner aquí color dark red, ¿vale?

357
00:24:45,059 --> 00:24:54,420
Fijaros que lo que ocurre es que los cuatro párrafos se han cambiado y se han puesto en rojo oscuro, ¿vale?

358
00:24:54,559 --> 00:24:58,059
Si yo solo quisiera el primer párrafo, lo que hago es utilizar una pseudoclase.

359
00:24:58,900 --> 00:25:03,920
En este caso pondría dos puntos y pondría first child, ¿vale?

360
00:25:05,079 --> 00:25:06,440
Sería el primer hijo, digamos.

361
00:25:06,920 --> 00:25:10,059
Y fijaros que ahora solo me aparece el primer párrafo.

362
00:25:10,059 --> 00:25:20,559
párrafo. Esto lo podríamos hacer, ¿vale? Esto sería para, lo voy a poner aquí, para

363
00:25:20,559 --> 00:25:28,960
el primer párrafo dentro del div llamado posición elemento, ¿vale? Luego podríamos

364
00:25:28,960 --> 00:25:39,529
hacerlo de una forma similar, ¿vale? Para el último párrafo, solo que en vez de utilizar

365
00:25:39,529 --> 00:25:44,750
En la pseudo clase first child utilizaríamos last child, ¿vale?

366
00:25:45,289 --> 00:25:51,369
Y ahora aquí en vez de poner rojo oscuro, pues ponemos, por ejemplo, verde oscuro, ¿vale?

367
00:25:51,369 --> 00:25:53,769
Dark green, ¿vale?

368
00:25:54,190 --> 00:25:57,509
Y fijaros que ya tengo el último párrafo también en verde.

369
00:25:58,710 --> 00:26:04,769
Y esto lo podemos hacer también eligiendo un elemento en concreto dentro de la lista de elementos, ¿vale?

370
00:26:04,769 --> 00:26:31,140
Entonces, yo podría, pongo aquí un espacio, ¿vale? Un salto de línea y voy a volver a pegar. Y ahora, yo aquí lo haría para el párrafo, por ejemplo, número 2, perdón, para el párrafo número 2 dentro de ese dip.

371
00:26:31,140 --> 00:26:44,119
¿Cómo lo haría? Pues en vez de poner first child, pondría dos puntos y pondría end child, ¿vale?

372
00:26:44,799 --> 00:26:48,940
Y entre paréntesis pondría el párrafo que yo quiero, en este caso el 2, ¿vale?

373
00:26:49,279 --> 00:26:57,339
Y ahora aquí, pues en vez de poner rojo oscuro, pues voy a poner, por ejemplo, azul oscuro, dark blue, ¿vale?

374
00:26:57,339 --> 00:27:06,019
Y lo mismo, podría copiarlo igual y pegarlo para el párrafo número 3.

375
00:27:06,200 --> 00:27:11,680
Y lo único que tendría que cambiar sería el número del elemento, en este caso poner el 3, ¿vale?

376
00:27:11,920 --> 00:27:16,240
Y aquí pongo dark orange, ¿vale?

377
00:27:17,900 --> 00:27:22,619
Con esto, como podéis ver, podéis elegir el número exacto del elemento que queréis.

378
00:27:22,619 --> 00:27:28,960
Pero no solo el número, sino que también podríais, por ejemplo, elegir los elementos pares o los elementos impares, ¿vale?

379
00:27:29,180 --> 00:27:33,440
Para eso, por ejemplo, vamos a crearnos una lista justo debajo de aquí del div, ¿vale?

380
00:27:33,920 --> 00:27:35,859
Vamos a seguir el mismo procedimiento que antes.

381
00:27:36,220 --> 00:27:39,059
Vamos a hacer una lista no ordenada, ul, ¿vale?

382
00:27:39,819 --> 00:27:47,400
Dentro de esa lista, por eso pongo el símbolo mayor que, vamos a poner elementos li, que era para hacer cada uno de los ítems, ¿vale?

383
00:27:47,400 --> 00:27:58,440
El i venía del list item, ¿vale? Y ahora, como quiero hacer 5 elementos, por ejemplo, pues voy a poner asterisco 5, ¿vale?

384
00:27:58,519 --> 00:28:06,299
Para que me lo multiplique por 5. Y le doy al tabulador, ¿vale? Y fijaros que ya automáticamente aparecen los 5 elementos.

385
00:28:06,299 --> 00:28:18,420
Y yo ahora aquí pondría, pues, manzanas, peras, fresas, uvas y moras, ¿vale?

386
00:28:19,900 --> 00:28:26,319
Y yo ahora, dentro de este, en mi parte de style, ¿vale?

387
00:28:26,440 --> 00:28:33,200
Lo que voy a hacer, por ejemplo, es coger de los elementos, dentro de ul voy a coger los elementos li, ¿vale?

388
00:28:33,200 --> 00:28:39,019
Y voy a poner la sedoclase en child, ¿vale?

389
00:28:39,539 --> 00:28:45,880
Pero aquí voy a elegir solo los elementos, puedo coger los elementos pares o los elementos impares, ¿vale?

390
00:28:46,160 --> 00:28:48,440
El funcionamiento es básicamente el mismo.

391
00:28:48,539 --> 00:28:50,400
Voy a coger, por ejemplo, los elementos pares, ¿vale?

392
00:28:50,500 --> 00:28:52,180
Uy, pares no, es herido, ¿vale?

393
00:28:54,039 --> 00:29:02,200
Entonces pongo aquí, modificar solo los elementos pares dentro de ul.

394
00:29:03,200 --> 00:29:14,799
Y en este caso, pues les voy a poner un color verde y un tamaño de letra de 18 píxeles.

395
00:29:16,559 --> 00:29:20,299
Y voy a hacer lo mismo para los elementos impares.

396
00:29:26,269 --> 00:29:29,750
Even era para los pares, pues para los impares, odd.

397
00:29:29,750 --> 00:29:37,670
¿Vale? Y aquí pues el color va a ser rojo y el tamaño pues vamos a poner en vez de 18, 10.

398
00:29:38,210 --> 00:29:48,700
¿Vale? Y fijaros que en este caso lo que tenemos es aquí.

399
00:29:49,240 --> 00:29:56,019
¿Vale? Podéis ver como las manzanas, las fresas y las moras, que son los elementos impares, aparecen en rojo y en chiquitito.

400
00:29:56,019 --> 00:30:00,519
¿Vale? Y en verde y un poquito más grande los elementos pares.

401
00:30:00,519 --> 00:30:19,380
¿Vale? Vamos a continuar viendo pseudoclases. Ahora para hacer esta pseudoclase hemos visto cómo podíamos elegir elementos pares, elementos impares, pero ahora vamos a ver una forma que puede resultar un poco compleja al principio, pero realmente es muy sencilla.

402
00:30:19,380 --> 00:30:23,940
Está basada en una formulita, también para elegir elementos en concreto, ¿vale?

403
00:30:24,779 --> 00:30:29,799
Nos vamos a crear aquí una cabecera, ¿vale?

404
00:30:30,319 --> 00:30:37,299
Una cabecera H2, que vamos a poner pseudo clase.

405
00:30:38,019 --> 00:30:42,140
Y en este caso va a ser también basado en el encha, ¿vale?

406
00:30:42,200 --> 00:30:46,119
Pero vamos a utilizar una fórmula que va a ser AN más B, ¿vale?

407
00:30:46,380 --> 00:30:48,420
Y ahora explicaremos lo que es A y lo que es B y todo eso.

408
00:30:48,420 --> 00:30:52,900
Y debajo lo que vamos a hacer es crearnos una lista ordenada o L, ¿vale?

409
00:30:53,000 --> 00:30:57,740
Dentro de esa lista vamos a poner elemento LI y vamos a poner 10 elementos, ¿vale?

410
00:30:59,400 --> 00:31:01,599
Y ahora le damos al tabulador.

411
00:31:02,599 --> 00:31:21,049
Y ahora aquí ponemos primero, segundo, tercero, cuarto, quinto, sexto, séptimo,

412
00:31:23,349 --> 00:31:34,789
octavo, noveno y décimo, ¿vale? Y nos vamos a ir a nuestra etiqueta style, ¿vale? Y vamos

413
00:31:34,789 --> 00:31:40,970
a modificar aquí los estilos, ¿vale? Y lo que vamos a hacer para utilizar esa expresión,

414
00:31:41,089 --> 00:31:50,089
¿vale? Vamos a poner, como esto sigue siendo una pseudo clase orientada a la posición

415
00:31:50,089 --> 00:32:06,710
o no al número vale modificamos sólo los que cumplan la fórmula a n más b y vamos a hacer

416
00:32:06,710 --> 00:32:13,789
una cosa vamos a ir viéndolo directamente conforme voy evitando vale entonces pondríamos ol porque

417
00:32:13,789 --> 00:32:19,670
la lista ordenada vale la que acabamos de crear dentro de la lista los elementos y vamos a poner

418
00:32:19,670 --> 00:32:30,529
poner nChain, ¿vale? Y en principio vamos a poner, por ejemplo, 2n más 0, ¿vale? ¿Qué

419
00:32:30,529 --> 00:32:36,990
significa ese 2n más 0? Pues significa que va a coger cada dos elementos empezando desde

420
00:32:36,990 --> 00:32:42,210
el elemento 0, ¿vale? Es decir, que si yo ahora pongo aquí, por ejemplo, que me cambie

421
00:32:42,210 --> 00:32:43,650
el color, el background

422
00:32:43,650 --> 00:32:45,089
color, ¿vale?

423
00:32:46,089 --> 00:32:48,130
y me ponga un amarillo

424
00:32:48,130 --> 00:32:50,410
me lo tendría que poner

425
00:32:50,410 --> 00:32:52,609
en los elementos 2, 4, 6

426
00:32:52,609 --> 00:32:54,230
8 y 10, ¿vale? fijaros

427
00:32:54,230 --> 00:32:56,089
efectivamente

428
00:32:56,089 --> 00:32:58,349
¿vale? si yo ahora aquí

429
00:32:58,349 --> 00:33:00,369
hago un cambio y en vez de poner 2L

430
00:33:00,369 --> 00:33:02,269
le pongo 3, pues me hace

431
00:33:02,269 --> 00:33:03,990
3, 6 y 9, ¿vale?

432
00:33:04,630 --> 00:33:06,329
si yo ahora vuelvo a poner 2

433
00:33:06,329 --> 00:33:08,569
pero pongo 2, en vez

434
00:33:08,569 --> 00:33:09,509
de más 0, más 1

435
00:33:09,509 --> 00:33:13,369
pues ahora me coge desde el elemento número 1, ¿vale?

436
00:33:13,549 --> 00:33:18,549
Si lo hago 2n más 4, pues me lo hace desde el 4, ¿vale?

437
00:33:19,109 --> 00:33:25,410
Si pongo 4n más 0, pues me haría el 4 y el 8, ¿vale?

438
00:33:25,990 --> 00:33:29,650
De esta forma yo, por ejemplo, podría escoger también los últimos elementos,

439
00:33:29,829 --> 00:33:32,910
pues pondría los 5 últimos, pondría 5, ¿vale?

440
00:33:33,349 --> 00:33:36,890
Perdón, pondría n más 5, ¿vale?

441
00:33:36,890 --> 00:33:56,569
¿Qué quiero coger los 5 primeros? Menos n más 5, ¿vale? ¿Por qué? Porque partiría de la posición 5 e iría hacia arriba, ¿vale? ¿Ok? Esto yo creo que es bastante sencillito de entender, ¿vale?

442
00:33:56,569 --> 00:34:06,150
Y referente a elementos posicionales, digamos, vamos a ver lo último, ¿vale?

443
00:34:07,190 --> 00:34:12,690
Que va a ser utilizando la otra pseudo clase, la pseudo clase not, ¿vale?

444
00:34:13,170 --> 00:34:19,789
Vamos a poner aquí una cabecera h2, pseudo clase not, ¿vale?

445
00:34:20,230 --> 00:34:25,230
Y para esto vamos a crear un elemento div contenedor y dentro tres parros, ¿vale?

446
00:34:25,230 --> 00:34:27,869
y lo hacemos utilizando los atajos de n

447
00:34:27,869 --> 00:34:29,869
entonces pondríamos un div

448
00:34:29,869 --> 00:34:32,230
dentro de ese div vamos a poner

449
00:34:32,230 --> 00:34:34,269
el elemento párrafo

450
00:34:34,269 --> 00:34:35,829
y como queremos tres párrafos

451
00:34:35,829 --> 00:34:37,690
ponemos asterisco 3

452
00:34:37,690 --> 00:34:39,389
y le damos al tabulador

453
00:34:39,389 --> 00:34:39,829
¿vale?

454
00:34:40,969 --> 00:34:43,449
y lo borro porque

455
00:34:43,449 --> 00:34:45,590
dentro de ese elemento p

456
00:34:45,590 --> 00:34:48,030
queremos texto lorem ipsum

457
00:34:48,030 --> 00:34:49,730
pues pondríamos otra vez mayor que

458
00:34:49,730 --> 00:34:51,710
y lorem y le damos al tabulador

459
00:34:51,710 --> 00:34:52,769
¿vale?

460
00:34:52,769 --> 00:34:56,349
y fijaros que ya me aparecen estos tres, ¿vale?

461
00:34:57,650 --> 00:35:02,210
Y yo ahora le voy a poner al div, le voy a poner un id, ¿vale?

462
00:35:02,349 --> 00:35:04,250
Que va a ser negación, ¿vale?

463
00:35:04,489 --> 00:35:06,349
Del elemento not.

464
00:35:06,869 --> 00:35:11,889
Y al p le vamos a poner, por ejemplo, una clase, que va a ser segundo, ¿vale?

465
00:35:12,809 --> 00:35:18,710
Y fijaros cómo se construye una pseudo clase, un estilo con la pseudo clase not.

466
00:35:19,269 --> 00:35:22,349
Vamos a poner un comentario.

467
00:35:22,769 --> 00:35:28,050
pseudo clase no, ¿vale?

468
00:35:28,710 --> 00:35:31,329
Y el procedimiento va a ser el siguiente.

469
00:35:31,489 --> 00:35:34,090
En primer lugar vamos a poner div, ¿vale?

470
00:35:34,449 --> 00:35:36,929
Porque es un elemento div.

471
00:35:38,210 --> 00:35:40,570
Ese elemento div tiene un id, ¿vale?

472
00:35:40,869 --> 00:35:44,630
Por eso ponemos almohadilla, que ponemos negación, ¿vale?

473
00:35:46,050 --> 00:35:49,429
Ponemos un espacio porque dentro de ese elemento div

474
00:35:49,429 --> 00:35:51,869
llamado negación, queremos

475
00:35:51,869 --> 00:35:53,210
los párrafos

476
00:35:53,210 --> 00:35:56,210
y de esos párrafos utilizamos la pseudoclase

477
00:35:56,210 --> 00:35:56,929
not

478
00:35:56,929 --> 00:36:02,150
y entre paréntesis vamos a especificar

479
00:36:02,150 --> 00:36:03,610
las clases que no queremos

480
00:36:03,610 --> 00:36:06,010
que son todas aquellas que no

481
00:36:06,010 --> 00:36:08,010
sean segundos, por lo tanto pondríamos

482
00:36:08,010 --> 00:36:10,070
punto, recuerdo

483
00:36:10,070 --> 00:36:11,969
que para poner una clase, igual que

484
00:36:11,969 --> 00:36:14,050
para poner un id era almohadilla y el id

485
00:36:14,050 --> 00:36:16,010
para poner clase es punto

486
00:36:16,010 --> 00:36:17,150
y el nombre de la clase

487
00:36:17,150 --> 00:36:43,210
¿Vale? Punto segundo. Abrimos llave y dentro vamos a poner color red y el tamaño de letra vamos a ponerle un poco más pequeño a 11 píxeles. ¿Vale? Y fijaros como el primer párrafo y el último párrafo, es decir, todos aquellos que no pertenecen a la clase segundo, son los únicos que se ven aceptados. ¿Vale?

488
00:36:43,210 --> 00:36:57,150
¿Vale? Esto lo podríamos hacer también de otra manera, ¿vale? Podríamos, por ejemplo, quitar aquí la clase segundo, ¿vale? No me interesa la clase segundo, la quito, ¿vale?

489
00:36:57,150 --> 00:37:09,269
Y ahora, en el estilo, en la pseudoclase, en vez de poner not negación, pondríamos otra pseudoclase dentro.

490
00:37:09,429 --> 00:37:13,389
Pues pondríamos no, el elemento, ¿vale?

491
00:37:13,530 --> 00:37:17,329
El elemento hijo dentro de negación, pues por ejemplo el 2.

492
00:37:17,989 --> 00:37:21,570
Y fijaros que el efecto es el mismo, ¿vale?

493
00:37:21,929 --> 00:37:25,250
Me está cogiendo todos menos el segundo párrafo.

494
00:37:25,250 --> 00:37:29,210
Si yo pongo el 3, me los coge todo, menos el tercer párrafo.

495
00:37:29,289 --> 00:37:32,809
Si yo pongo 1, me los coge todo, menos el primer párrafo.

496
00:37:33,750 --> 00:37:33,989
¿Vale?