Platzi
Platzi

LA EDUCACIÓN ES UN REGALO ¡ACCEDE AL PRECIO ESPECIAL!

Antes: $249
$149
Currency
Antes: $249
Ahorras: $100
COMIENZA AHORA
Termina en: 16D : 16H : 54M : 25S

Pseudo-clases y pseudo-elementos en las animaciones

3/20
Recursos

Aportes 31

Preguntas 6

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Una nota importante con la pseudo clase hover es que hay dispositivos a los que no se le puede hacer hover porque no tienen puntero (siendo los celulares el ejemplo más claro) y es posible que añadirle estilos que dependan de un hover pueda ser contraproducente para la funcionalidad de estos elementos.
.
Lo bueno es que ahora CSS tiene un media query llamado hover que permite agregarle estilos solamente en dispositivos que permiten hacer hover.
.
Por ejemplo si tenemos algún tag a que queremos que al hacer hover tenga un background-color distinto pero sólo queremos que pase en equipos que acepten hover podríamos usar esta línea de código:

@media (hover: hover) {
  a:hover {
    background: yellow;
  }
}

Es importante tener esto en cuenta por ejemplo en caso de que hagamos una card que sólo muestra el contenido completo si haces hover sobre esta. Esto obviamente no sería posible desde un celular, entonces lo que se haría sería dejar todas las propiedades de la card sin animaciones y en el media query de hover poner todo lo respecto a su animación para que pueda ser accesible a través de un celular o una tablet sin problemas.

También es bueno tener en cuenta que las pseudo-clases y los pseudo-elementos son distintos entre sí, ambos se escriben como una extensión de nuestro selector después de dos puntos: :hover, after; sin embargo, una pseudo-clase es básicamente un estado que podemos manipular, por ejemplo, el estado hover, el estado active, el estado visited, etc.
.
Un pseudo-elemento, como su nombre lo dice, es un elemento que no está declarado explícitamente desde nuestro HTML, pero lo podemos crear con CSS, por ejemplo before y after, ¿cómo sabes que es un pseudo-elemento y no una pseudo-clase? ¡Fácil! Simplemente preguntate: ¿existe el estado before? Verás que la respuesta es “no”, no existe ningún estado before porque este es un pesudo-elemento, por el contrario, si te preguntas: ¿existe el estado :hover? Aquí la respuesta es “sí”, porque hover sí es una pseudo-clase 😄
.
En este link puedes encontrar una lista de pseudo-clases diponibles:

Indice de las pseudo-clases estándar

Y en este otro verás una lista de los pseudoelementos disponibles 😉:

Lista de pseudoelementos

Me gusta que Teff haya escuchado las criticas de que sus cursos eran solo diapositivas y cero código. Muy lindo que quiera cambiar o mejorar.

Pseudo clases

Link hace referencia a un enlace que no se ha visitado.

a:link{
    color: brown;
}

visited hace referencia a un enlace que ya ha sido visitado.

a:visited {
    color: tomato;
}

hover es una pequeña interacción que sucede cuando pasamos el cursor sobre la clase referenciada.

a:hover{
    background-color: palegoldenrod;
}

not esta omite la clase que le pasemos por parametro.

p:not(.maravillas){
    color: aquamarine;
}

nth-child esta funciona para poder referencia una clase especifica de acuerdo al numero que le pasemos como parámetro, por cierto esta es muy útil para css grid.

.container div:nth-child(1){
    color: lightblue;
}

Pseudo-elementos

after coloca después algo previamente establecido por nosotros.

div::after{
            content: ":)";
        }

before coloca antes algo previamente establecido por nosotros.

div::before{
            content: ":(";
        }
  • :first-child ⇒ Toma al ultimo elemento de una serie de etiquetas iguales.
  • :only-child ⇒ Toma al primer elemento de una serie de etiquetas iguales.
  • :nth-child(A) ⇒ Toma al elemento según la posición en la que este. Comienza del 1 hasta n.
  • :first-of-type ⇒ Toma al primer elemento de todos los que sean iguales.
  • :nth-of-type(A) ⇒ Similar al :nth-child, con la inclusión de que se puede pasar a todos los elementos mediante :nth-of-type(odd)
  • :nth-of-type(An+B) ⇒ Se le puede pasar la ubicación del elemento a modificar, siendo [An = cada cuantos elementos va a dar el salto] y [+b será la forma de resetear los saltos y darle un valor personalizado.]
  • :only-of-type ⇒ Selecciona elementos que sean los únicos de su tipo dentro de su elemento padre.
  • :last-of-type ⇒ Selecciona a los últimos elementos dentro de un grupo que sean iguales.
  • :empty ⇒ Se aplica a elementos que no tenga ningún otro dentro.
  • :not(X) ⇒ Selecciona todos los elementos que no coincidan con el selector de negación.
  • A[attribute] , ejemplo: a[href] ⇒ Selecciona todos los elementos que tengan un atributo especifico.
  • [attribute="value"], ejemplo: input[type="checkbox"] ⇒ Selecciona todos los elementos que tengan un valor de atributo especifico. También permite buscar partes de ese valor, como por ejemplo: .toy[category^=“Swim”] daría como posibles resultados category="Swimwear // category=“Swimming”.
  • [attribute$="value"], ejemplo: img[src$=".jpg"] ⇒ Permite buscar una parte especifica, como por ejemplo que las imágenes terminen en .jpg o también se podría. Siempre busque las partes finales de la palabra.
  • [attribute*="value"] ⇒ Similar al de arriba, solo con la diferencia que en vez de buscar al final de una palabra, este permite hacerlo dentro, pudiendo buscar partes en toda la longitud.

Comparto mis apuntes de la clase:

trigger o disparador

Un disparador o trigger es una funcionalidad que se ejecuta de forma automática cuando se realiza una accion.

Pseudo-clases en las animaciones

Una pseudoclase CSS es una palabra clave que se añade a los selectores y que especifica un estado especial del elemento seleccionado. Por ejemplo, :hover aplicará un estilo cuando el usuario haga hover sobre el elemento especificado por el selector.

  • :link
  • :visited
  • :hover
  • :not
  • :nth-child
  • :focus
  • :active
  • :disabled

Pseudo-elementos en las animaciones

Al igual que las pseudo-classes, los pseudo-elementos se añaden a los selectores, pero en cambio, no describen un estado especial sino que, permiten añadir estilos a una parte concreta del documento. Por ejemplo, el pseudoelemento ::first-line selecciona solo la primera línea del elemento especificado por el selector.

  • ::after
  • ::before

URL

Pseudo-classes

es una palabra clave que se añade a los selectores y que especifica un estado especial del elemento seleccionado.

Sintaxis

selector : pseudoclase { propiedad: valor; }

Pseudoelementos

los pseudo-elementos se añaden a los selectores, pero en cambio, no describen un estado especial sino que, permiten añadir estilos a una parte concreta del documento.
siempre se escribe con dos puntos dobles
Sintaxis

selector :: pseudo-elemento { propiedad: valor; }

¿Alguien sabe cual es el tema que utiliza en VS Code la profe? 🤔

Al momento de usar pseudo-clases, es necesario tener en cuenta que estas llevan un order, de acuerdo a LVHA-order
.
Entonces, para que funcionen correctamente, necesitan ir en el siguiente orden (en caso de que se ocupen todas las mencionadas)

  • :link
  • :visited
  • :hover
  • :active

Un concepto importante para las animaciones es el triget!
Que es un triget?
Es un accionador de las animaciones.
Una animacion se ejecuta justo despues de una accion, y las acciones pueden ser direrntes en el navegador (hover, clic, scroll, recargar la pagina y ver una animacion) y entonces tenemos las pseudo clases y pseudo elementos.

El orden adecuado para que los estilos de las pseudo-clases no se sobrescriban (sean anulados) es agregar los estilos en el siguiente orden:

  • linked - visited - hover - active.
    *Teniendo en cuenta que todos tengan la misma especificidad.

En la etiqueta ancla pueden usar # para eviar que se regrese al home, y se quede en la misma página.

para los que les gusta tener el html y el css separado se los dejo aqui

Pseudo-clases
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <<link rel="stylesheet" href="./style.css">
</head>
<body>
    <a href="">Alicia</a>
    <p>en el</p>
    <p class="maravillas">país</p>
    <div class="cotainer">
        <div>>Alicia</div>
        <div>>Alicia</div>
        <div>>Alicia</div>
    </div>
</body>
</html>

CSS

a:link {
    color: hotpink;
}
a:visited {
    color: tomato;
}
a:hover {
    background-color: palegoldenrod;
}
p:not(.maravillas) {
    color:lightsalmon;
}
.container div:nth-child(1){
    color: lightblue;
}

pseudo-elementos
HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link
</head>
<body>
    <div>>Alicia</div>
</body>
</html>

CSS

div::before {
    content: ":)";
}
div::after {
    content: ":(";
}

Sou de los que la unica animacion que le ponia a mis sitios ere el efecto Hover No entendia el resto o simplemente los desconocia Genial.

** Primer curso con Estefany (Que es una gran profesora) donde vemos codigo directamente. Genial

hola,
una buen extension que puedan usar en este curso es la de live server para que ustedes les de click derecho en donde esta su codigo html y le dan en open with live server y listo ya vemos lo que estamos haciendo

pseudo clases = :
pseudo elementos = ::

No se porque pero de todos tus cursos…en este no me aburro. tal vez sea por el formato. De todas formas son buenos cursos

Pseudo-clases y pseudo-elementos en las animaciones

Una animación ocupa un accionador para que sucedan, en CSS usamos las pseudo-clases y pseudo-elementos.

    /* Link No visitado */
        a:link {
            color: hotpink;
        }
        /* Link Visitado */
        a:visited {
            color: tomato;
        }
        /* Pasar el cursos */
        a:hover {
            background-color: palegoldenrod;
        }
        /* Seleccionar que no tendrá estilos */
        p:not(.maravillas) {
            color: lightsalmon;
        }
        /* Definir estilos en los hijos de un contenedor padre */
        .container div:nth-child(1) {
            color: lightseagreen;
        }
        /* Colocar estilos antes del elemento HTML */
        div::before {
            content: ":)";
        }
        /* Colocar estilos después del elemento HTML */
        div::after {
            content: ":(";
        }

Es difícil no sentir aprecio a la forma de explicar de la profe. Gracias profe 😉

Muy buena clase para complementar el curso de HTML y CSS. Quedo muy claro 😃

Les recomiendo CodePen es un editor de texto online gratis y de facil uso, nos viene bien para estos cursos que necesitamos probar codigo y ademas los cambios se reflejan automaticamete, ademas podemos tener registro de cada archivo, creandonos una cuenta.
Se que en VsCode esta LiveServer, pero esta herramienta ayuda tambien.

Un trigger o disparador

Un disparador o trigger es una funcionalidad que se ejecuta de forma automática cuando se realiza una accion.

Pseudo-clases

Es un estado que podemos manipular, el estado de hover, el de active, etc. Su sintaxis es:

selector:pseudoclase { propiedad: valor; }

Ejemplos

  • :link : Representa un elemento que todavía no se ha visitado, se le aplica a elementos que contengan el atributo href="". Los estilos serán anulado por cualquier pseudo-clase :active, :hover y :visited.

    a:link {
    	color: hotpink;
    }
    
  • :visited : Representa enlaces que el usuario ya ha visitado, pocos elementos pueden usarla.

    a:visited {
    	background-color: salmon;
    }
    
  • :hover : Se activa cuando el usuario esta sobre un elemento. Llega a ser problemática en pantallas táctiles.

    a:hover {
    	border-bottom: 1px solid white;
    }
    

El orden en que se ponen es; LVHA: :link — :visited — :hover — :active.

  • :not() : Selecciona a que elementos específicos no se les aplicara un estilo. Selecciona los elementos que no coinciden con una lista de selectores.
/*Todos los elementos p excepto los que tengan la clase maravillas*/
p:not(.maravillas) {
	color: red;
}
  • :nth-child : Nos permite seleccionar varios elementos hijos de la clase indicando su posición.

    /*Indicamos que primer div de .container le aplicaremos un fondo amarillo*/
    .container div:nth-child(1) {
    	background-color: yellow;
    }
    
  • :active : Representa un elemento que el usuario está activando. Con un mouse, la “activación” es cuando el usuario presiona el botón del mouse y termina cuando lo suelta. Se usa en elementos <a> y <button>

    button:active {
    	border: 2px solid green;
    }
    

Pseudo-elementos

Permiten añadir estilos a una parte del documento, un elemento que no esta creado con HTML pero lo podemos crear con CSS.

  • ::before : Añade un contenido antes del texto.

    p::before {
    	content: ";)"
    }
    
  • ::after : Agregar contenido al final de lado derecho.

    p::after {
    	content : ":o"
    }
    

:hover DEBE ir después de :link y :visited (si están presentes) en la definición de CSS, para que sea efectivo.

:active DEBE ir después de :hover (si está presente) en la definición de CSS para que sea efectivo.

🍿Pseudo-clases y pseudo-elementos en las animaciones

❤Pseudo-clases

es una palabra clave que se añade a los selectores y que especifica un estado especial del elemento seleccionado.

Sintaxis

selector : pseudoclase { propiedad: valor; }
  • Ejercicios Pseudo-classes

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            a:link {
                color: hotpink;
            }
            a:visited {
                color: tomato;
            }
            a:hover {
                background-color: palegoldenrod;
            }
            p:not(.maravillas){
                color: lightsalmon;
            }
            .container div:nth-child(1) {
                color:lightseagreen;
            }
        </style>
    </head>
    <body>
        <a href="/www.google.com">Alicia</a>
        <p>en el</p>
        <p class="maravillas">pais</p>
        <div class="container">
            <div>Alicia</div>
            <div>Alicia</div>
            <div>Alicia</div>
        </div>
    </body>
    </html>l
    

🧡Pseudo-Elementos

los pseudo-elementos se añaden a los selectores, pero en cambio, no describen un estado especial sino que, permiten añadir estilos a una parte concreta del documento. Siempre se escribe con dos puntos dobles

Sintaxis

selector :: pseudo-elemento { propiedad: valor; }
  • Ejercicios Pseudo-Elementos

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div::before {
                content: ":]";
            }
            div::after {
                content: "[:";
            }
        </style>
    </head>
    <body>
        <div>Alicia</div>
    </body>
    </html>
    

💛Lecturas Recomendadas

:disabled

:active

:focus

:hover

htmlcolorcodes

Pseudo-classes

Pseudo-elementos

Muy buena explicación Miss!!! Voy a practicar muy bien todo para tener más claro todo, gracias 😎💓

Amo más los gifs de la peli que cada video, aguante Anne H.❤️

Gracias Teff ❤️ Como siempre increíbles tus cursos!

Notas de la clase

Pseudo-clases

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="Description" content="Extended Description">
        <meta name="robots" content="index,follow">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Pseudo-clases</title>
        <link rel="stylesheet" href="">
        <style>
            /* El color de un link sin visitar */
            a:link {
                color: hotpink;
            }
            /* El color de un link ya visitado */
            a:visited {
                color: tomato;
            }
            /* Al pasar el poiter sobre ese elemento */
            a:hover {
                background-color: crimson;
            }
            /* Todos los elementos "p" excepto el de la clase "maravilla" */
            p:not(.maravilla) {
                color: coral;
            }
            /* Solamente aplica la propiedad al primer hijo "div" de esa clase "container" */
            .container div:nth-child(1) {
                color: chartreuse;
            }
        </style>
    </head>
    <body>
        <a href="#">Alicia</a>
        <p class="maravilla">primer párrafo</p>
        <p>segundo párrafo</p>
        <div class="container">
            <div>uno</div>
            <div>dos</div>
            <div>tres</div>
            <div>cuatro</div>
        </div>
    </body>
</html>

.
Pseudo-elementos

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="Description" content="Extended Description">
        <meta name="robots" content="index,follow">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Pseudo-elementos</title>
        <link rel="stylesheet" href="">
        <style>
            /* Agregar una propiedad antes del contenido del selector "div" */
            div::before {
                content: ":) ";
            }
            /* Agregar una propiedad después del contenido del selector "div" */
            div::after {
                content: " --->";
            }
        </style>
    </head>
    <body>
        <div>
            Soy un contenedor
        </div>
    </body>
</html>

Muy bien, mucho más clara la diferencia de Pseudo-clases y Pseudo-elementos.