CURSO de CSS 2021 Rapido y Facil # 10 | 💻 PSEUDO-CLASES
Summary
TLDREn este episodio del curso de CSS, Jagla Johnny explora las pseudoclases, que permiten modificar el comportamiento de los elementos HTML de manera distintiva. Se inicia con una introducción a las pseudoclases y su importancia en la identificación y modificación de elementos específicos en una página web. A continuación, se practica con ejemplos sencillos, como cambiar el color de fondo del primer y último elemento de una lista, utilizando las pseudoclases ':first-child' y ':last-child'. Además, se explica cómo seleccionar elementos en posiciones específicas usando ':nth-child'. Finalmente, se introduce el concepto de ':hover', demostrando cómo cambiar el color de fondo y el texto al pasar el mouse sobre un enlace, dejando al espectador con un anticipo de lo que se verá en el próximo episodio.
Takeaways
- 😀 El presentador, Jagla Johnny, introduce el episodio de CSS centrado en las pseudoclases.
- 🔧 Las pseudoclases son herramientas CSS que permiten modificar el comportamiento de los elementos HTML de manera específica.
- 🎨 Se explica que las pseudoclases se utilizan para dar estilos especiales a elementos HTML, mejorando la apariencia y el comportamiento de la página web.
- 📝 Se da un ejemplo práctico eliminando todo lo anterior y comenzando con un `body` limpio en el archivo CSS.
- 🖋️ Se muestra cómo aplicar estilos básicos a un elemento `h1`, incluyendo color de fondo, color de texto, tamaño de fuente y alineación del texto.
- 👁️ Se introduce la pseudoclase `:first-child` para aplicar estilos solo al primer elemento de un conjunto, como el primer `h1`.
- 🔝 Se discute cómo usar la pseudoclase `:last-child` para identificar y aplicar estilos al último elemento, pero se aclara que esto requiere un contenedor común.
- 🔢 Se explica el uso de la pseudoclase `:nth-child()`, que permite seleccionar elementos en posiciones específicas dentro de un conjunto, utilizando la notación `n`.
- 🔄 Se menciona la pseudoclase `:hover`, que cambia la apariencia de un elemento cuando el mouse se sitúa sobre él, y se sugiere que se explorará en detalle en un episodio futuro.
- 🔗 Se da un ejemplo de cómo utilizar la pseudoclase `:hover` en un enlace para cambiar su color de fondo y de texto al pasar el mouse por encima.
Q & A
¿Qué son las pseudoclases en CSS y para qué sirven?
-Las pseudoclases en CSS son selectores que permiten aplicar estilos a un elemento HTML de manera que se distinga de otros elementos, sin necesidad de agregar clases o identificadores adicionales. Sirven para modificar el comportamiento de los elementos y mejorar la experiencia de usuario al interactuar con la página web.
¿Cuál es la diferencia entre una clase y una pseudoclase en CSS?
-Una clase en CSS es un selector que se aplica a un elemento mediante el atributo 'class' en HTML, y se puede combinar con otros selectores. Una pseudoclase, por otro lado, se utiliza para aplicar estilos basados en el estado del elemento, como cuando el usuario interactúa con él, y no se aplica a través de atributos en HTML.
¿Cómo se utiliza la pseudoclase ':first-child' en CSS?
-La pseudoclase ':first-child' se utiliza para seleccionar el primer elemento hijo dentro de un elemento padre. En el ejemplo del script, se aplica a la primera etiqueta 'h1' para cambiarle el color de fondo a negro.
¿Qué hace la pseudoclase ':last-child' y cómo se implementa en el ejemplo?
-La pseudoclase ':last-child' selecciona el último elemento hijo dentro de un elemento padre. En el ejemplo, se utiliza para cambiar el color de fondo de 'h1' a negro, pero primero se necesita un contenedor para que ':last-child' funcione correctamente, ya que 'h1' no estaban en un contenedor inicialmente.
¿Qué es la pseudoclase ':nth-child()' y cómo se utiliza?
-La pseudoclase ':nth-child()' permite seleccionar un elemento en una posición específica dentro de sus hermanos. Se utiliza con paréntesis donde se especifica la posición, como en ':nth-child(3)', para cambiar el estilo de David en el ejemplo, que estaba en la tercera posición.
¿Cómo se implementa la pseudoclase ':hover' en el ejemplo del script?
-La pseudoclase ':hover' se aplica a un elemento cuando el puntero del mouse está sobre él. En el ejemplo, se utiliza para cambiar el color de fondo y el color del texto de un enlace cuando el usuario pasa el mouse sobre él.
¿Qué estilos se aplican a los elementos 'h1' en el ejemplo del script?
-En el ejemplo, se aplican estilos a los elementos 'h1' como color de fondo azul, color de texto blanco, tamaño de fuente de 75 píxeles y alineación del texto al centro.
¿Cómo se utiliza el color de fondo y el color del texto en el enlace con la pseudoclase ':hover'?
-En el enlace con la pseudoclase ':hover', se establecen diferentes colores de fondo y texto para cuando el usuario pasa el mouse sobre el enlace. El fondo cambia a naranja y el texto a negro.
¿Cuál es la función de la etiqueta 'div' en el ejemplo para aplicar pseudoclases?
-La etiqueta 'div' se utiliza como un contenedor para los elementos 'h1', permitiendo que las pseudoclases ':first-child' y ':last-child' funcionen correctamente, ya que estos elementos deben estar dentro de un elemento padre para que se puedan seleccionar.
¿Cómo se puede cambiar el estilo de un elemento específico en una serie de elementos similares?
-Se puede cambiar el estilo de un elemento específico utilizando la pseudoclase ':nth-child()' y especificando la posición del elemento con la notación 'n', donde 'n' es el número de la posición deseada. Esto se demuestra en el ejemplo al cambiar el color de fondo de 'h1' en posiciones específicas.
Outlines
🎨 Introducción a las pseudoclases en CSS
El vídeo comienza con Jagla Johnny presentando un nuevo episodio de su curso de CSS, enfocado en la práctica con pseudoclases. Explicó que las pseudoclases son herramientas para modificar el comportamiento de elementos HTML de manera diferenciada, permitiendo así una mejor visualización y funcionamiento en la página web. Para ilustrar esto, se procede a limpiar el código CSS previo y se mantiene solo el body, la etiqueta 'motivación' y se establece un fondo beige. Seguidamente, se introduce el concepto de pseudoclase ':first-child', que permite aplicar estilos a los elementos que son el primer hijo de su contenedor, como se demuestra con un ejemplo de etiquetas 'h1' para los nombres Carlos, Pedro y David.
🔧 Manipulación de pseudoclases para elementos específicos
En este segmento, Jagla Johnny profundiza en el uso de pseudoclases como ':last-child' y ':nth-child()' para aplicar estilos a elementos que no son el primer o último hijo de su contenedor. Se muestra cómo encapsular los elementos 'h1' en un contenedor 'div' para poder identificar al último elemento, en este caso, David, y aplicarle un estilo específico. Además, se explica cómo utilizar ':nth-child()' para seleccionar y aplicar estilos a elementos en posiciones específicas dentro del contenedor, demostrando con ejemplos cómo cambiar el color de fondo de David, Pedro y Carlos según su posición.
🖱️ Aplica estilos con la pseudoclase ':hover'
El último párrafo del guion trata sobre la pseudoclase ':hover', que permite aplicar estilos temporales a un elemento cuando el usuario posiciona el cursor del mouse sobre él. Se crea un enlace con la etiqueta 'a' y se le asignan propiedades de estilo como color de fondo y texto, así como alineación y tamaño de fuente. Luego, se muestra cómo la pseudoclase ':hover' cambia el color de fondo y el color del texto cuando el puntero del mouse se sitúa sobre el enlace. Esto sirve como introducción a la utilidad de las pseudoclases en la interacción con los elementos de la página web y se anuncia que en el próximo episodio se explorará un tema específico relacionado con las pseudoclases en CSS.
Mindmap
Keywords
💡Pseudoclases
💡CSS
💡Selectores
💡Etiquetas HTML
💡Propiedades CSS
💡:first-child
💡:last-child
💡nth-child
💡Hover
💡Contenedores
Highlights
Introducción a las pseudoclases en CSS y su importancia en la modificación del comportamiento de elementos HTML.
Eliminación de contenido previo y configuración inicial del documento HTML y CSS para comenzar la práctica.
Inserción de etiquetas h1 y escritura de nombres para ilustrar el uso de pseudoclases.
Aplicación de estilos básicos a los elementos h1, incluyendo color de fondo, color de texto y tamaño de fuente.
Uso de la pseudoclase `:first-child` para cambiar el color de fondo del primer elemento h1.
Explicación detallada de cómo funciona la pseudoclase `:first-child` y su efecto en el primer elemento de una lista.
Cambio de la pseudoclase `:first-child` a `:last-child` para aplicar estilos al último elemento h1.
Adición de un contenedor div para poder identificar correctamente el último elemento con la pseudoclase `:last-child`.
Uso de la pseudoclase `:nth-child()` para aplicar estilos a elementos en posiciones específicas dentro de una lista.
Ejemplo práctico de cómo cambiar el estilo de elementos en posiciones específicas utilizando `:nth-child()`.
Descripción de cómo la pseudoclase `:nth-child()` permite especificar patrones de selección de elementos.
Inserción de una etiqueta a y configuración de su apariencia con estilos básicos.
Uso de la pseudoclase `:hover` para cambiar el color de fondo y el color del texto al pasar el mouse sobre un enlace.
Demostración de la interacción dinámica con la pseudoclase `:hover` y su efecto inmediato.
Visión general de las pseudoclases y sus aplicaciones prácticas en la personalización de elementos HTML.
Anuncio de futuras lecciones para explorar temas específicos y profundizar en el uso de pseudoclases en CSS.
Transcripts
[Música]
qué tal amigos soy jagla johnny
bienvenidos al episodio número días de
tu curso de css hoy lo que vamos a hacer
es practicar con las pseudo clases
bien antes de empezar es bueno saber que
es una pseudo clase o para que lo vamos
a usar básicamente una pseudo clase nos
ayuda a modificar el comportamiento de
los elementos html de manera en que en
el cual vamos a poder distinguir de una
manera distinta a los demás elementos
dando alguna modificación especial para
que en primer lugar tenga una mejor
vista y además de esa manera poder
identificar el comportamiento que puede
tener nuestra página web
ok dado esa pequeña introducción ahora
sí vamos a pasar a la parte práctica con
algunas pseudo clases
bueno para empezar a lo que vamos a
hacer es eliminar todo lo que hicimos en
nuestro anterior episodio simplemente en
estilo css nos vamos a quedar con el
body ok
acá en index e.html va a ser lo mismo
vamos a mantener la etiqueta motivación
control ese y nuestro navegador debería
estar limpio ok salvo nuestro fondo de
color beige bien hoy vamos a ver el tema
de la pseudo clase soy y rayón y hoy
vamos a explicar de manera detallada
pues de frente este tema recuerda que
los pseudo clases son elementos que nos
ayudan a identificar de manera distinta
algún elemento en especial dentro de
nuestra página web ok y vamos a partir
con un ejemplo muy sencillo y una pseudo
clase que nos ayuda perfectamente a
saber para que pueda usar precisamente
este tipo de término ok entonces vamos a
irnos a index e.html y vamos a
introducir la etiqueta h1 ok y dentro de
esta etiqueta vamos a escribir algunos
nombres que te parecen carlos
carlos así perfecta vamos a volver a
introducir archivo no estamos extraer el
nombre de pedro
para terminar vamos a volver a
introducir h1 una vez más pero esta vez
con el nombre de david perfecto si yo
presiono controles en acá deberíamos
tener esos nombres carlos pedro y david
y bien para que se vea mejor vamos a
darle algunos estilos vamos a llamar a
h1 de manera general y simplemente vamos
a otorgar un color de fondo background
para ser precisos como se seleccionar la
opción background color ok y yo voy a
cambiarlo a color azul blog punto y coma
ahora lo que necesito es cambiar el
color del texto porque no se va a ver
muy bien con negro yo lo voy a cambiar
por white punto y coma y también vamos a
incrementar el tamaño de mi texto con un
font size que te parece de 75 píxeles
punto y coma y si presionó controles ya
ahí podemos ver los cambios pero para
que se vea mejor yo voy a escribir text
align centre ok para que nuestro texto
se posicione en la posición central y
bien hasta el momento nada del otro
mundo esto ya lo habíamos visto ahora
vamos a entrar en acción con el tema de
las pseudo clases y para eso yo necesito
trabajar primeramente con una etiqueta
la única en el cual tengo dentro de mi
documento es h1 por tanto voy a llamar a
h1 que es la etiqueta en el cual voy a
realizar este cambio para trabajar con
un pseudo clase yo necesito presionar
dos puntos y seguidamente en nombre de
la pseudo clase vamos a comenzar con
ferrer ya gilles ok
abrimos llama es como cualquier tipo de
selector simplemente que en este caso
además de llamar a la etiqueta estoy
otorgando la pseudo clase de nombre
first sawyer y que vamos a poner
precisamente dentro de este tipo de
selector cualquier tipo de cambio que
quiera
aplicar en este caso qué te parece si
cambiamos el color de fondo aquí yo lo
tengo de color azul para eso voy a
escribir la tigra un color a negro black
punto y coma y si presionó control s
automáticamente
miren anteriormente vimos que en el tema
de los electores si yo así ese cambio se
aplicaba todo con el caso del blog se ve
hizo de esa manera pero al identificarlo
con la pseudo clase fairchild que quiere
decir que el primer elemento va a sufrir
ese cambio que en este caso es de color
negro lo identifica de esta manera
ok entonces precisamente para eso me va
a servir la pseudo clase para
identificar un elemento de manera
distinta y la primera vez que vemos este
tema de esta pseudo clase usamos
fairchild en el cual estoy otorgando un
cambio de manera distinta en este caso
con un color negro para identificarlo de
manera especial
ok miren ahora yo también podría
aplicarlo al final en este caso debería
aplicarse en david para eso vamos a
quitar la pseudo clase files y vamos a
escribir lo contrario que sean las child
ok si presionó control s no pasa nada
este último elemento lo debería tener de
color negro y eso se debe porque
precisamente acá en html automáticamente
ya s donde inicia pero el elemento tapiz
no quiere decir que es el último
elemento para poder identificar un
elemento como último yo necesito
contenerlo depositarlo en un contenedor
para eso vamos a trabajar acá con tips
este contenedor de lo que va a hacer es
seleccionar todo esto y vamos a
depositarlo dentro del dip controles
clic derecho vamos a cortarlo y vamos a
depositarlo en este punto clic derecho
pegar que de hecho vamos a hacerlo de
manera más ordenada
para poder distinguir
así ok entonces dentro de este
contenedor div
yo tengo a carlos a pedro y a david si
presionó controles en ojo dentro de html
controles en ahí lo tienes david ahora
yo lo tengo de color negro porque
precisamente la pseudo clase en la child
lo que hace es cambiar de color a negro
al último elemento en este caso david ok
y mira no quiere decir que david siempre
va a ser el último
que pasa si aquí escribo h1 en la
palabra 12
controla ese ahora luz y es el último
elemento
ok entonces automáticamente el último
alimento va a otorgarle en este caso
este tipo de estilo que yo lo quiero de
color negro que no simplemente esto tú
puedes poner cualquier tipo de estilo
pero con la propiedad las child al
último elemento se va a otorgar ese tipo
de cambio bien todo perfecto pero qué
pasa si yo quiero otorgar a un elemento
que no esté al principio y mucho menos
al final a uno que esté entre pedro o
david lo podemos hacer de la siguiente
manera vamos a borrar la pseudo clase
las child y yo simplemente voy a
escribir nth child as debido a notar que
a diferencia de los de los anteriores
pseudo clases
éste tiene paréntesis porque acá yo
necesito especificar en qué posición
necesito para eso yo voy a presionar el
número ser seguidamente por la letra n
que más adelante les voy a identificar
para qué sirve y seguidamente
depositamos el valor más y en la
posición que yo quiero en este caso yo
quiero cambiar a david
no sé si está en la posición 123
entonces acá yo debo depositar el valor
de 3 si presionó controles ya ahí lo
tienes david ahora está pintado de este
color ley de color negro si yo lo cambio
a 2
entonces pedro toma esa posición 1 2 3 y
4 vamos a sacar yo lo cambio a cuatro y
ahora luz y toma esa posición y también
acá en carlos para eso
ingrese el valor de uno controles y
ahora carlos tiene este tipo de estilo y
bien para qué me sirve pero este punto
para que puedas comprender lo mejor me
vengo acá voy a escribir otros h1 en
este caso héctor otro archivo no con el
nombre de hugo y para terminar un último
h1 con el nombre de sara
controles en y tenemos varios ok ahora
para qué me sirve ese punto imaginemos
que acá yo lo voy a cambiar por la
posición 2 ok
dos controles en
y como sabemos pedro ahora lleva esa
propiedad pero ahora sí acá yo lo cambio
que te parece a tres miran lo que pasa
controles automáticamente pedro y héctor
tienen esta propiedad porque yo estoy
indicando en este punto dónde va a
iniciar 12 pero en 3 m quiere decir que
a partir de el pósito de esta posición
va a contar precisamente tres puestos 1
2 3
ok para que me entienda es mejor acá yo
lo voy a cambiar a dos controles ya y
miren se respeta 12 12 12 gracias a esta
propiedad ok entonces va a ir de dos en
dos y ahora si yo lo cambió a tres eso
quiere decir que a partir de pedro veis
de tres en tres pero en este caso como
pedro comienza en la posición 2 no
podemos verlo de una mejor manera pero
si lo cambió a 1 control s ahora sí 1 y
miren 1 2 3
1 2 3 también ok
de esta manera vamos a poder usar este
tipo de pseudo clase pero prácticamente
el más usado es algo que denominamos con
el nombre de hover bien para que
entiendas ese punto vamos a borrar todo
lo que hicimos con el h1
vamos a dejarlo tal como estaba
control de ese vacío y aquí yo voy a
ingresar la etiqueta a vamos a escribir
en este punto que no nos lleve a ningún
lado vamos a poner alguna referencia
digamos ir al curso de java un ejemplo
si yo presiono controles e ahí lo tienes
el elemento pero también acá en css
vamos a llamar precisamente a la
etiqueta vamos a darle algunas
propiedades
bhatti ground color
blue que es el preferido para este curso
punto y coma
vamos a cambiar el color de texto a
blanco
también vamos a darle un text align
center para que el elemento se vea bien
si expresión los controles se ve
perfecto vamos a incrementar el tamaño
de texto con font sites qué te parece de
80 píxeles
punto y coma controles ya se ve mejor y
en este caso para qué me sirve la
etiqueta que les acabo de mencionar
miren acá yo voy a traer otra pseudo
etiqueta vamos a llamar a la misma
etiqueta dos puntos este que lleva de
nombre jover
y en ese punto lo único que yo quiero es
que el color de fondo el background yo
lo tenga de color
con h punto y coma y que el texto color
sea lo contrario de color negro punto y
coma
si yo presiono control s a simple vista
no pasa nada pero qué pasa si yo
traslado el puntero del mouse
automáticamente vemos esa transición de
cambio de un color azul a un color
naranja
ok y eso es precisamente lo vamos a ver
en detalle en nuestro siguiente episodio
ok
simplemente como introducción a la seudo
clases punto específico de este episodio
es saber para qué me puede servir este
tipo de elementos y también algunas de
las propiedades los cuales lo vamos a
ver más adelante ok y bien eso ha sido
todo por hoy nos vemos en el siguiente
episodio más con pseudo clases y con un
tema específico dentro de tu curso de
css
Voir Plus de Vidéos Connexes
CURSO de CSS 2021 Rapido y Facil # 9 | 💻 TIPOS DE ELEMENTOS
CURSO de CSS 2021 Rapido y Facil # 11 | 💻 ENLACES
CURSO de CSS 2021 Rapido y Facil # 3 | 💻 SELECTORES
CURSO de CSS 2021 Rapido y Facil #12 | 💻 CAJAS FLOTANTES
CURSO de CSS 2021 Rapido y Facil # 4 | 💻 EL COLOR
CURSO de CSS 2021 Rapido y Facil # 2 | 💻 PRIMEROS PASOS
5.0 / 5 (0 votes)