Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

CSS3 - Pseudoclases - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 26 de enero de 2021 por Fernando M.

177 visualizaciones

Más información Transcripción

Descargar la transcripción

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. 00:00:00
Y aquí vamos a distinguir dos elementos, pseudo-clase y pseudo-elemento. 00:00:08
Vamos a empezar, vamos a abrir el brackets. 00:00:14
Yo ya me he creado un archivo que como podéis ver lo he llamado pseudo.html. 00:00:17
Y lo primero que voy a hacer es crearnos nuestra estructura de siempre 00:00:24
Recuerdo, HTML 2.5 00:00:31
Tabulador 00:00:33
Y en el título vamos a poner 00:00:36
Ejemplos de pseudo clases 00:00:41
Y bueno, vamos a crearnos aquí una estructura de web sencilla 00:00:46
Vamos a empezar con una cabecera H1 00:00:52
que va a ser pseudo clases con hojas de estilo, ¿vale? CSS. 00:00:55
Y en primer lugar vamos a trabajar con un tipo de pseudo clases, ¿vale? 00:01:04
Por eso voy a poner una cabecera tipo 2, que van a ser pseudo clases orientadas a enlaces, ¿vale? 00:01:08
Y para esto, pues como son orientadas a enlaces, pues lo primero que hay que hacer es crearnos un enlace, ¿vale? 00:01:16
Entonces voy a poner, os voy a enseñar también otro atajo o forma de escribir rápido utilizando Emmet, ¿vale? 00:01:21
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? 00:01:28
Por ejemplo, yo pondría esto es un enlace, ¿vale? 00:01:38
Y ahora después de las llaves le doy al tabulador, ¿vale? 00:01:41
Y fijaros que ya me crea directamente el enlace y me aparece la opción de HR, ¿vale? 00:01:45
por lo que yo ahora le pondría 00:01:50
almohadillas, vale 00:01:52
ok, entonces 00:01:54
vamos a ver 00:01:56
pseudo clase orientada a enlaces 00:01:57
como estos son hojas de estilo 00:02:00
nos vamos a ir a la parte del head 00:02:02
que vamos a poner style, vale 00:02:04
uy, y no 00:02:06
style, ahí 00:02:07
vale 00:02:10
y aquí dentro es donde vamos ahora 00:02:11
a poner nuestro estilo, entonces 00:02:14
voy a poner un comentario 00:02:16
que va a ser pseudo 00:02:17
clases orientadas 00:02:20
a enlace 00:02:22
¿vale? 00:02:23
y lo primero que voy a hacer es 00:02:26
cambiar el color de un 00:02:27
enlace ¿vale? 00:02:30
entonces para cambiar el color de un enlace lo vamos a hacer 00:02:32
siguiendo la siguiente pseudo clase 00:02:34
que es a dos puntos 00:02:36
link ¿vale? 00:02:38
y entre llaves por ejemplo 00:02:41
a este enlace le voy a poner el color verde 00:02:42
fijaros que cuando pongo color green me va a cambiar 00:02:44
el color de aquí azul. Ya veis que el enlace ha cambiado. Entonces esto sería, lo voy 00:02:46
a poner con un comentario, enlace antes de clicar, antes de hacer clic. Luego voy a poner 00:02:56
todas las pseudo clases que vamos a meter los enlaces y luego las vamos probando, porque 00:03:08
que ya el resto no los vamos a poder ver directamente. 00:03:14
La siguiente va a ser el enlace una vez que hayamos hecho clic. 00:03:17
Una vez que ese enlace ya sea visitado, cambia de color. 00:03:22
Enlace una vez hecho clic. 00:03:28
Y para eso, pues, a dos puntos, visita. 00:03:30
Y lo mismo en este caso, porque vamos a poner el color, pues yo qué sé. 00:03:34
Rojo oscuro. 00:03:41
Luego vamos a poner 00:03:42
Una pseudo clase 00:03:45
¿Vale? 00:03:47
Para estilo 00:03:48
Al pasar 00:03:50
El ratón por encima 00:03:53
¿Vale? 00:03:54
Es decir, para que cambie cuando pasamos el ratón por encima 00:03:55
Entonces ponemos A 00:03:58
Y vamos a poner over 00:03:58
¿Vale? 00:04:00
Y aquí, pues por ejemplo 00:04:02
Lo que vamos a hacer es aumentar el 00:04:04
Aumentar el tamaño de la fuente 00:04:06
Por ejemplo 00:04:08
¿Vale? 00:04:09
Vamos a ponerlo a 20 píxeles 00:04:10
y aparte le vamos a poner un color de fondo 00:04:12
le vamos a poner 00:04:15
amarillo 00:04:18
y por último 00:04:21
vamos a poner 00:04:26
otra pseudo clase que es cuando 00:04:29
hemos hecho clic pero mantenemos el botón 00:04:33
el dedo pulsado, es decir 00:04:36
mientras estamos haciendo ese proceso de clic 00:04:39
Que aquí en los comentarios 00:04:42
Pues vamos a poner el estilo 00:04:44
Al pulsar el botón 00:04:46
Y pondríamos 00:04:47
El botón más bien es del lado 00:04:52
Y pondríamos a 00:04:54
Active 00:04:57
Y aquí ponemos color 00:04:58
Black 00:05:00
Ya lo tenemos todo, guardamos 00:05:01
Y fijaros, si yo ahora pongo 00:05:07
Ahora mismo el color verde 00:05:09
Ya lo veis que sería esta parte 00:05:12
Si yo ahora pongo el ratón encima 00:05:13
Tiene que aumentar la fuente y poner un color de fondo 00:05:15
¿Vale? Fijaros 00:05:18
Aumenta la fuente y aparece un color amarillo 00:05:20
Simplemente al pasar el ratón encima 00:05:23
¿Vale? 00:05:25
Y si yo hago click 00:05:26
Tiene que ponerse en negro 00:05:28
¿Vale? 00:05:30
Fijaros que aparece en negro 00:05:33
¿Ok? 00:05:35
Y si yo ahora voy al enlace 00:05:38
Al visitar el enlace se queda en un rojo oscuro 00:05:39
¿Lo veis? 00:05:43
Ya sería como un enlace visitado, ¿vale? 00:05:45
Importante, estas cuatro clases no hay por qué utilizarlas las cuatro. 00:05:51
Es habitual utilizarlas las cuatro, pero no tiene por qué. 00:05:54
En caso de utilizarlas las cuatro, siempre es recomendable utilizarlas en el mismo orden, ¿vale? 00:05:57
Link, Visit, Over y Active, ¿vale? 00:06:02
Y esto no es solo para enlaces, podría valer para cualquier otro elemento, ¿vale? 00:06:06
Vamos a poner, por ejemplo, un par de desartos de línea aquí, ¿vale? 00:06:11
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? 00:06:15
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? 00:06:41
Y lo que voy a hacer es poner un color rojo, ¿vale? 00:06:49
Y de nuevo, pues aumento la fuente, o aquí no voy a aumentar la fuente, ¿vale? 00:06:53
Voy a aumentar la fuente cuando haga clic en el botón, ¿vale? 00:07:00
Pues pongo bold button active y aquí pongo font size 25 píxeles. 00:07:03
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. 00:07:11
Funciona, por lo tanto, perfectamente. 00:07:25
Ahora vamos a continuar haciendo una pseudo clase, pero en este caso orientada a formularios. 00:07:31
¿Vale? Entonces nos vamos a venir aquí y vamos a poner pseudoclases orientadas a formularios. 00:07:40
¿Vale? Y antes de eso, pues tenemos que hacer nuestro formulario en sí. 00:07:55
¿Vale? Voy a ponerme aquí otro título H2 que lo distinga. 00:08:00
¿Vale? Pseudoclases orientadas a formularios. 00:08:05
vale 00:08:12
y pues vamos al lío 00:08:13
en primer lugar 00:08:16
ponemos form, vale, y dentro del action 00:08:16
lo vamos a dejar sin nada, vale 00:08:22
lo vamos a dejar limpio 00:08:23
y ahora, entre los dos 00:08:25
la etiqueta de cierre y la de inicio de form 00:08:27
será donde pongamos todo el formulario 00:08:30
vale, entonces vamos a empezar 00:08:32
poniendo 00:08:34
una etiqueta label, vale 00:08:34
que vamos a poner aquí como 00:08:37
identificador de la etiqueta 00:08:39
su nombre 00:08:41
Y esto va a estar relacionado o asociado, mejor dicho, a una input, ¿vale? 00:08:42
Una input de tipo texto, como ahí aparece. 00:08:49
Y recuerdo que en ese input hay que ponerle el mismo id que pusimos en el for del label, ¿vale? 00:08:52
Del label. 00:08:58
Para que así su nombre, ¿vale? 00:09:00
Vamos a poner un tamaño, por ejemplo, de 50. 00:09:03
Así. 00:09:07
Y ahora un par de saltos de línea. 00:09:08
Ahora vamos a copiarnos todo esto un par de veces 00:09:10
¿Vale? 00:09:20
Para que sea más fácil, tardemos menos en hacer formular 00:09:21
Y en el primer caso 00:09:25
Donde hemos puesto su nombre 00:09:28
Pues vamos a poner su apellido 00:09:31
¿Vale? 00:09:33
Aquí vamos a poner apellido 00:09:35
Esto lo vamos a pegar aquí 00:09:36
y ahora aquí vamos a poner su correo, y aquí ponemos e-mail, y en el tipo, aquí si es importante, ¿vale? 00:09:42
En el tipo hay que cambiarlo, hay que poner e-mail, ¿vale? 00:09:53
¿Qué más, qué más? Vamos a poner también unos radiobutons, ¿vale? 00:09:59
Entonces vamos a poner aquí género, vamos a poner dos puntos y un salto de línea, ¿vale? 00:10:03
Y vamos a poner un input de tipo, en lugar de texto va a ser radio, ¿vale? 00:10:14
El nombre de la variable va a ser género, ¿vale? 00:10:21
Este input en concreto va a tener un id que se llama hombre y un valor, 00:10:26
que es lo que vamos a guardar 00:10:31
en la variable género que va a poner 00:10:33
masculino 00:10:35
¿vale? 00:10:36
y debajo vamos a poner el label 00:10:39
como dentro del 00:10:41
for tenemos que poner lo mismo que hay en el id 00:10:43
¿vale? en este caso va a ser 00:10:45
hombre y aquí 00:10:47
vamos a poner 00:10:51
masculino 00:10:51
y todo esto lo vamos a 00:10:54
copiar y lo vamos a 00:10:57
pegar debajo y lo vamos a hacer igual 00:11:02
pero en vez de para hombre vamos a poner 00:11:04
mujer y donde pone masculino. Y ahora esto, tal y como lo tenemos, lo vamos a copiar, 00:11:06
¿vale? Para hacer un checkbox, ¿vale? Lo que eran las cajitas donde podíamos rellenarlo, 00:11:20
¿vale? Yo lo he copiado. Bueno, voy a poner aquí dos saltos de línea. Eso, ¿eh? Y ahora 00:11:28
aquí vamos a poner, por ejemplo, pasatiempo, ¿vale? En el tipo ya no va a ser radio, ¿vale? 00:11:34
Va a ser una checkbox, fijaros cómo ha cambiado, era una cajita, ¿vale? 00:11:41
En el nombre aquí vamos a poner pasatiempo1, vamos a poner hobby, que es más corto, hobby1. 00:11:46
En el id de este hobby vamos a poner, por ejemplo, hiking, ¿vale? 00:11:56
Y en el valor lo que se va a guardar es la variable pasatiempo, que va a ser en este caso excursionismo, ¿vale? 00:12:00
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, 00:12:09
en el id vamos a poner 00:12:36
yo que sé 00:12:40
reading, ¿vale? 00:12:43
ese id lo vamos a poner en el for 00:12:48
¿vale? 00:12:50
y vamos a poner como value la lectura 00:12:52
¿vale? 00:12:54
y aquí lectura 00:12:56
vale 00:12:58
pues entonces, vamos a fijarnos 00:13:00
cuando nosotros nos vamos a nuestro formulario 00:13:01
y yo hago click, por ejemplo, en nombre 00:13:03
fijaros que 00:13:06
aparece un recuadrito 00:13:07
negro, ¿vale? Si hago clic en apellido 00:13:10
me pasa lo mismo en apellido, algo parecido, ¿no? 00:13:13
Vale, pues nosotros podemos gestionar entre otras muchas cosas 00:13:17
todo esto. Entonces nos vamos a ir a 00:13:19
aquí donde habíamos dicho pseudo clase orientada 00:13:22
a formulario y vamos a empezar a ver 00:13:25
elementos, ¿vale? En primer lugar lo que vamos a 00:13:28
hacer es destacar 00:13:31
¿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? 00:13:35
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? 00:13:47
light yellow 00:14:05
¿vale? fijaros que ahora 00:14:10
las tres cajitas 00:14:12
de input 00:14:14
me han aparecido en un amarillo clarito 00:14:15
¿vale? 00:14:18
ahora 00:14:21
vamos a hacer 00:14:21
destacar 00:14:24
el elemento seleccionado ¿vale? 00:14:26
o el campo seleccionado 00:14:30
¿cómo lo hacemos eso? 00:14:32
pues de nuevo con input 00:14:34
y ahora entre dos puntos en vez de poner 00:14:35
enable vamos a poner el focus 00:14:38
¿vale? 00:14:40
entonces el elemento seleccionado 00:14:42
el elemento enfocado ¿vale? 00:14:43
y entonces en este caso vamos a poner background 00:14:46
color 00:14:48
yellow 00:14:48
¿vale? 00:14:51
entonces fijaros que si yo ahora hago 00:14:54
clic en apellido 00:14:56
o en email todos me aparecen 00:14:57
en un amarillo más fuerte ¿vale? 00:15:01
más opciones 00:15:06
vamos a coger el apellido y vamos a poner 00:15:06
ponerle la etiqueta Disable, ¿vale? Para deshabilitarlo, ¿vale? Fijaros que cuando lo pongo aparece 00:15:11
como en un gris así clarito, ¿vale? Si yo hago clic no me deja hacer nada. Pues ahora 00:15:18
nos vamos a venir aquí, vamos a poner Input, ¿vale? Bueno, primero voy a poner unos comentarios 00:15:23
que indique qué es esto, ¿vale? Destacar elementos deshabilitados, ¿vale? Ponemos 00:15:28
simple y como pseudo clase disabled vale y aquí lo que vamos a hacer por ejemplo va a ser poner 00:15:35
un color de fondo va a tirar un color que va a ser el gris vale pues un gris oscuro para que 00:15:43
destaque con respecto al otro vale fijaros que ya se ha puesto gris oscuro y aparte vamos a poner 00:15:52
que el cursor, el cursor del ratón no esté permitido, ¿vale? ¿Qué quiere decir esto? 00:15:59
Pues fijaros, si yo paso el ratón, aquí me ha cambiado a esta línea vertical como 00:16:04
si me dejara introducir texto, pero si me voy ahora a apellido, fijaros que ahora el 00:16:11
cursor aparece con el símbolo de prohibido, ¿vale? Para que veáis hasta qué cosas se 00:16:16
pueden hacer con hojas de texto. Vale, vamos por ejemplo ahora en el caso que pusiéramos 00:16:21
el campo del contenido email incorrecto, ¿vale? Recuerdo que eso ocurría cuando no poníamos 00:16:29
arroba algo punto com o arroba algo punto eso, lo que sea, ¿vale? Entonces, aquí vamos 00:16:34
a combinar un selector por atributo, ¿vale? Con una pseudo clase, ¿vale? Entonces, destaca 00:16:39
cuando el correo 00:16:50
es incorrecto 00:16:53
el formato de correo 00:16:54
¿vale? 00:16:56
es incorrecto 00:16:58
y pongo mezcla 00:17:02
selector 00:17:03
por atributos 00:17:04
con pseudo clase 00:17:07
¿vale? entonces fijaros 00:17:10
en primer lugar 00:17:12
ponemos el elemento que es input 00:17:14
luego ponemos el selector por atributos que era 00:17:15
type ¿vale? 00:17:18
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. 00:17:19
¿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? 00:17:30
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? 00:17:41
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? 00:17:54
Si yo ahora pusiera un punto, también me lo daría por malo, tendría que terminarlo en punto algo, ¿vale? 00:18:04
¿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. 00:18:11
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? 00:18:33
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. 00:18:50
Recuerdo que masculino, femenino, música y lectura son elementos label, ¿vale? 00:18:57
El elemento input realmente sería el puntito o el cuadradito, ¿vale? 00:19:02
Entonces, para esto, como digo, mezclamos pseudoclases con selector por atributo y selector adyacente, ¿vale? 00:19:09
Entonces, fijaros. 00:19:32
En primer lugar pondríamos input. 00:19:33
Luego pondríamos el selector por atributo. 00:19:36
En este caso, es TiempoTypeRadio. 00:19:37
Y luego pondríamos el selector adyacente, que en este caso sería Check, ¿vale? 00:19:42
De elemento seleccionado. 00:19:49
Y ahora pondríamos el selector adyacente, porque nosotros lo que queremos es el elemento Label 00:19:50
que hay justo después de ese botón seleccionado, ¿vale? 00:19:55
¿Y qué le vamos a hacer? 00:19:59
Pues le vamos a poner, por ejemplo, un color de fondo que sea azul, ¿vale? 00:20:00
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? 00:20:06
volvemos a poner check 00:20:29
y después del check ponemos lo mismo 00:20:31
label, vale, abrimos 00:20:36
y cerramos llave y en este caso 00:20:38
únicamente vamos a cambiar el color 00:20:40
lo vamos a poner en rojo y vamos a cambiar 00:20:42
el tamaño del puente, vale 00:20:44
por ejemplo, vamos a poner 00:20:46
20 piso 00:20:48
vale, y fijaros 00:20:49
que si yo ahora marco masculino 00:20:52
el label 00:20:54
me ha cambiado, si marco femenino 00:20:56
el label me ha cambiado, para el 00:20:58
¿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. 00:21:00
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. 00:21:16
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? 00:21:37
Y dentro de este elemento div lo que vamos a hacer es crear cuatro párrafos, ¿vale? Con texto Lorem Ipsum. 00:21:48
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? 00:21:57
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? 00:22:10
Entonces, lo que vamos a hacer es que vamos a poner P, porque es el elemento que queremos poner, ¿vale? Un párrafo. 00:22:18
Vamos a poner un por cuatro, ¿vale? 00:22:25
Porque queremos hacer cuatro párrafos diferentes 00:22:28
Y vamos a poner el símbolo de mayor que 00:22:32
Que esto significa que dentro de este párrafo aparezca lo siguiente 00:22:34
¿Y qué queremos que aparezca? 00:22:38
Pues un texto lorem ipsum, ¿vale? 00:22:40
Entonces ponemos lorem con la L en mayúscula 00:22:44
Y le damos ahora al tabulador, ¿vale? 00:22:46
Y fijaros que automáticamente aparecen cuatro párrafos con texto Lorem Ipsum, ¿vale? 00:22:49
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? 00:22:57
Posición elemento. 00:23:05
Y ahora vamos a ir a modificar esas dos clases basado en la posición o el número del elemento, ¿vale? 00:23:07
Nos vamos a ir aquí a la parte de Style, ¿vale? 00:23:13
Del elemento Style 00:23:17
Vamos a poner unos comentarios 00:23:18
Que vamos a poner en primer lugar 00:23:20
Eh... 00:23:22
Pseudoclases 00:23:23
Eh... 00:23:24
Sé que estaba poniendo Pseudoclases 00:23:29
Orientada a la posición o número de elementos 00:23:31
¿Vale? 00:23:37
Y bueno, y aquí debajo vamos a poner una carretera H2 00:23:39
Para que todo quede un poco más ordenado, ¿vale? 00:23:42
Eh... 00:23:44
Pseudoclases 00:23:45
A la posición 00:23:46
posición o número de elemento, ¿vale? 00:23:50
Entonces, en primer lugar vamos a modificar solo el primer párrafo que está contenido dentro de ese elemento div 00:23:54
llamado posición elemento, ¿vale? 00:24:01
Entonces, para eso lo que vamos a hacer es lo siguiente. 00:24:04
Vamos a coger y vamos a poner en primer lugar elemento div, ¿vale? 00:24:09
Como vamos a coger un elemento div en concreto, que es el que tiene el id posición elemento, 00:24:14
Pues ponemos la almohadilla y luego posición elemento, ¿vale? 00:24:19
Y luego ponemos un espacio para decirle que queremos el elemento, a los elementos párrafos, ¿vale? 00:24:26
Esto sería ahora mismo sin pseudo clase. 00:24:35
Si nosotros hiciéramos esta modificación, fijaros, ¿vale? 00:24:37
Voy a poner aquí color dark red, ¿vale? 00:24:41
Fijaros que lo que ocurre es que los cuatro párrafos se han cambiado y se han puesto en rojo oscuro, ¿vale? 00:24:45
Si yo solo quisiera el primer párrafo, lo que hago es utilizar una pseudoclase. 00:24:54
En este caso pondría dos puntos y pondría first child, ¿vale? 00:24:58
Sería el primer hijo, digamos. 00:25:05
Y fijaros que ahora solo me aparece el primer párrafo. 00:25:06
párrafo. Esto lo podríamos hacer, ¿vale? Esto sería para, lo voy a poner aquí, para 00:25:10
el primer párrafo dentro del div llamado posición elemento, ¿vale? Luego podríamos 00:25:20
hacerlo de una forma similar, ¿vale? Para el último párrafo, solo que en vez de utilizar 00:25:28
En la pseudo clase first child utilizaríamos last child, ¿vale? 00:25:39
Y ahora aquí en vez de poner rojo oscuro, pues ponemos, por ejemplo, verde oscuro, ¿vale? 00:25:45
Dark green, ¿vale? 00:25:51
Y fijaros que ya tengo el último párrafo también en verde. 00:25:54
Y esto lo podemos hacer también eligiendo un elemento en concreto dentro de la lista de elementos, ¿vale? 00:25:58
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. 00:26:04
¿Cómo lo haría? Pues en vez de poner first child, pondría dos puntos y pondría end child, ¿vale? 00:26:31
Y entre paréntesis pondría el párrafo que yo quiero, en este caso el 2, ¿vale? 00:26:44
Y ahora aquí, pues en vez de poner rojo oscuro, pues voy a poner, por ejemplo, azul oscuro, dark blue, ¿vale? 00:26:49
Y lo mismo, podría copiarlo igual y pegarlo para el párrafo número 3. 00:26:57
Y lo único que tendría que cambiar sería el número del elemento, en este caso poner el 3, ¿vale? 00:27:06
Y aquí pongo dark orange, ¿vale? 00:27:11
Con esto, como podéis ver, podéis elegir el número exacto del elemento que queréis. 00:27:17
Pero no solo el número, sino que también podríais, por ejemplo, elegir los elementos pares o los elementos impares, ¿vale? 00:27:22
Para eso, por ejemplo, vamos a crearnos una lista justo debajo de aquí del div, ¿vale? 00:27:29
Vamos a seguir el mismo procedimiento que antes. 00:27:33
Vamos a hacer una lista no ordenada, ul, ¿vale? 00:27:36
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? 00:27:39
El i venía del list item, ¿vale? Y ahora, como quiero hacer 5 elementos, por ejemplo, pues voy a poner asterisco 5, ¿vale? 00:27:47
Para que me lo multiplique por 5. Y le doy al tabulador, ¿vale? Y fijaros que ya automáticamente aparecen los 5 elementos. 00:27:58
Y yo ahora aquí pondría, pues, manzanas, peras, fresas, uvas y moras, ¿vale? 00:28:06
Y yo ahora, dentro de este, en mi parte de style, ¿vale? 00:28:19
Lo que voy a hacer, por ejemplo, es coger de los elementos, dentro de ul voy a coger los elementos li, ¿vale? 00:28:26
Y voy a poner la sedoclase en child, ¿vale? 00:28:33
Pero aquí voy a elegir solo los elementos, puedo coger los elementos pares o los elementos impares, ¿vale? 00:28:39
El funcionamiento es básicamente el mismo. 00:28:46
Voy a coger, por ejemplo, los elementos pares, ¿vale? 00:28:48
Uy, pares no, es herido, ¿vale? 00:28:50
Entonces pongo aquí, modificar solo los elementos pares dentro de ul. 00:28:54
Y en este caso, pues les voy a poner un color verde y un tamaño de letra de 18 píxeles. 00:29:03
Y voy a hacer lo mismo para los elementos impares. 00:29:16
Even era para los pares, pues para los impares, odd. 00:29:26
¿Vale? Y aquí pues el color va a ser rojo y el tamaño pues vamos a poner en vez de 18, 10. 00:29:29
¿Vale? Y fijaros que en este caso lo que tenemos es aquí. 00:29:38
¿Vale? Podéis ver como las manzanas, las fresas y las moras, que son los elementos impares, aparecen en rojo y en chiquitito. 00:29:49
¿Vale? Y en verde y un poquito más grande los elementos pares. 00:29:56
¿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. 00:30:00
Está basada en una formulita, también para elegir elementos en concreto, ¿vale? 00:30:19
Nos vamos a crear aquí una cabecera, ¿vale? 00:30:24
Una cabecera H2, que vamos a poner pseudo clase. 00:30:30
Y en este caso va a ser también basado en el encha, ¿vale? 00:30:38
Pero vamos a utilizar una fórmula que va a ser AN más B, ¿vale? 00:30:42
Y ahora explicaremos lo que es A y lo que es B y todo eso. 00:30:46
Y debajo lo que vamos a hacer es crearnos una lista ordenada o L, ¿vale? 00:30:48
Dentro de esa lista vamos a poner elemento LI y vamos a poner 10 elementos, ¿vale? 00:30:53
Y ahora le damos al tabulador. 00:30:59
Y ahora aquí ponemos primero, segundo, tercero, cuarto, quinto, sexto, séptimo, 00:31:02
octavo, noveno y décimo, ¿vale? Y nos vamos a ir a nuestra etiqueta style, ¿vale? Y vamos 00:31:23
a modificar aquí los estilos, ¿vale? Y lo que vamos a hacer para utilizar esa expresión, 00:31:34
¿vale? Vamos a poner, como esto sigue siendo una pseudo clase orientada a la posición 00:31:41
o no al número vale modificamos sólo los que cumplan la fórmula a n más b y vamos a hacer 00:31:50
una cosa vamos a ir viéndolo directamente conforme voy evitando vale entonces pondríamos ol porque 00:32:06
la lista ordenada vale la que acabamos de crear dentro de la lista los elementos y vamos a poner 00:32:13
poner nChain, ¿vale? Y en principio vamos a poner, por ejemplo, 2n más 0, ¿vale? ¿Qué 00:32:19
significa ese 2n más 0? Pues significa que va a coger cada dos elementos empezando desde 00:32:30
el elemento 0, ¿vale? Es decir, que si yo ahora pongo aquí, por ejemplo, que me cambie 00:32:36
el color, el background 00:32:42
color, ¿vale? 00:32:43
y me ponga un amarillo 00:32:46
me lo tendría que poner 00:32:48
en los elementos 2, 4, 6 00:32:50
8 y 10, ¿vale? fijaros 00:32:52
efectivamente 00:32:54
¿vale? si yo ahora aquí 00:32:56
hago un cambio y en vez de poner 2L 00:32:58
le pongo 3, pues me hace 00:33:00
3, 6 y 9, ¿vale? 00:33:02
si yo ahora vuelvo a poner 2 00:33:04
pero pongo 2, en vez 00:33:06
de más 0, más 1 00:33:08
pues ahora me coge desde el elemento número 1, ¿vale? 00:33:09
Si lo hago 2n más 4, pues me lo hace desde el 4, ¿vale? 00:33:13
Si pongo 4n más 0, pues me haría el 4 y el 8, ¿vale? 00:33:19
De esta forma yo, por ejemplo, podría escoger también los últimos elementos, 00:33:25
pues pondría los 5 últimos, pondría 5, ¿vale? 00:33:29
Perdón, pondría n más 5, ¿vale? 00:33:33
¿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? 00:33:36
Y referente a elementos posicionales, digamos, vamos a ver lo último, ¿vale? 00:33:56
Que va a ser utilizando la otra pseudo clase, la pseudo clase not, ¿vale? 00:34:07
Vamos a poner aquí una cabecera h2, pseudo clase not, ¿vale? 00:34:13
Y para esto vamos a crear un elemento div contenedor y dentro tres parros, ¿vale? 00:34:20
y lo hacemos utilizando los atajos de n 00:34:25
entonces pondríamos un div 00:34:27
dentro de ese div vamos a poner 00:34:29
el elemento párrafo 00:34:32
y como queremos tres párrafos 00:34:34
ponemos asterisco 3 00:34:35
y le damos al tabulador 00:34:37
¿vale? 00:34:39
y lo borro porque 00:34:40
dentro de ese elemento p 00:34:43
queremos texto lorem ipsum 00:34:45
pues pondríamos otra vez mayor que 00:34:48
y lorem y le damos al tabulador 00:34:49
¿vale? 00:34:51
y fijaros que ya me aparecen estos tres, ¿vale? 00:34:52
Y yo ahora le voy a poner al div, le voy a poner un id, ¿vale? 00:34:57
Que va a ser negación, ¿vale? 00:35:02
Del elemento not. 00:35:04
Y al p le vamos a poner, por ejemplo, una clase, que va a ser segundo, ¿vale? 00:35:06
Y fijaros cómo se construye una pseudo clase, un estilo con la pseudo clase not. 00:35:12
Vamos a poner un comentario. 00:35:19
pseudo clase no, ¿vale? 00:35:22
Y el procedimiento va a ser el siguiente. 00:35:28
En primer lugar vamos a poner div, ¿vale? 00:35:31
Porque es un elemento div. 00:35:34
Ese elemento div tiene un id, ¿vale? 00:35:38
Por eso ponemos almohadilla, que ponemos negación, ¿vale? 00:35:40
Ponemos un espacio porque dentro de ese elemento div 00:35:46
llamado negación, queremos 00:35:49
los párrafos 00:35:51
y de esos párrafos utilizamos la pseudoclase 00:35:53
not 00:35:56
y entre paréntesis vamos a especificar 00:35:56
las clases que no queremos 00:36:02
que son todas aquellas que no 00:36:03
sean segundos, por lo tanto pondríamos 00:36:06
punto, recuerdo 00:36:08
que para poner una clase, igual que 00:36:10
para poner un id era almohadilla y el id 00:36:11
para poner clase es punto 00:36:14
y el nombre de la clase 00:36:16
¿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? 00:36:17
¿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? 00:36:43
Y ahora, en el estilo, en la pseudoclase, en vez de poner not negación, pondríamos otra pseudoclase dentro. 00:36:57
Pues pondríamos no, el elemento, ¿vale? 00:37:09
El elemento hijo dentro de negación, pues por ejemplo el 2. 00:37:13
Y fijaros que el efecto es el mismo, ¿vale? 00:37:17
Me está cogiendo todos menos el segundo párrafo. 00:37:21
Si yo pongo el 3, me los coge todo, menos el tercer párrafo. 00:37:25
Si yo pongo 1, me los coge todo, menos el primer párrafo. 00:37:29
¿Vale? 00:37:33
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
177
Fecha:
26 de enero de 2021 - 19:24
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
37′ 36″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
117.86 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid