Pseudoclases y Pseudoelementos en CSS: Uso y Ejemplos Prácticos

Clase 3 de 20 • Curso de Transformaciones y Transiciones en CSS

Resumen

Un trigger es un accionador de animaciones, es decir, el evento inicial que desencadena una animación. Algunos ejemplos son:

Pasar el mouse sobre un elemento.
Dar clic a un elemento.
Al deslizar la pantalla.
Al recargar la página web.

Las pseudo-clases y pseudo-elementos ayudan a activar las animaciones.

Pseudo-clases

Una pseudo-clase define el estilo de un estado especial de un elemento.

Índice de pseudo-clases estándar{target="_blank"}.

Sintaxis

selector:pseudo-clase { propiedad: valor; }

:link

La pseudo-clase :link representa el estado de un elemento que no ha sido visitado.

Ejemplo usando :link{target="_blank"}

:visited

La pseudo-clase :visited representa el estado de un elemento que ya ha sido visitado.

Ejemplo usando :visited{target="_blank"}

:hover

La pseudo-clase :hover representa el estado en el cual el cursor está encima del elemento.

Ejemplo usando :hover{target="_blank"}

:not()

La pseudo-clase :not() representa el estado en el cual no coinciden los selectores que se indiquen.

Ejemplo usando :not(){target="_blank"}

:nth-child()

La pseudo-clase :nth-child() representa el estado en el cual coinciden los hijos del elemento según el valor indicado.

Valores de palabras clave:

odd: Los elementos hijos en posiciones impares.
even: Los elementos hijos en posiciones pares.

Fórmula matemática: An+B donde A y B son números enteros.

Ejemplo usando :nth-child(){target="_blank"}

Pseudos-elementos

Un pseudo-elemento define el estilo de una parte específica de un elemento.

Lista de pseudo-elementos{target="_blank"}.

Sintaxis

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

::before

La pseudo-elemento ::before sirve para agregar un contenido antes del elemento. El contenido es agregado mediante la propiedad CSS content.

Ejemplo usando ::before{target="_blank"}

::after

La pseudo-elemento ::after sirve para agregar un contenido después del elemento. El contenido es agregado mediante la propiedad CSS content.

Ejemplo usando ::after{target="_blank"}

Contribución creada por Andrés Guano.

Cristian Diaz

student•

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.

Pablo Nicolás Alonso

student•

Clave tu aporte maestro, ojala no se pierda y muchos la vean.

Matías Wasiak

student•

De hecho, en celulares si es posible hacer hover. En mi caso lo hago manteniendo el dedo sobre un elemento con esa propiedad y simplemente lo deslizo hacia un lado para poder quitar el dedo sin que cuente como una pulsacion.

Carlos Eduardo Gomez García

teacher•

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 :D . 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

Ana Rotela Cabrera

student•

Muy buenos recursos como siempre para tenerlos a mano ✨

Basace Rey Jiménez

student•

Gracias!

Rodolfo Vargas

student•

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.

Arturo Battistini

student•

la diferencia es del cielo a la tierra, antes era innecesariamente caótico

Alarcon Ricardo Ezequiel

student•

¡Si, yo hice la misma crítica en un curso anterior de ella y esto es el día y la noche, por el momento me parece maravilloso como mejoro la calidad del curso!

Sebastian Heredia

student•

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: ":(";
        }

Carlos Rubio Gallego

student•

Bien explicado!!!

Platzi Team

student•

Excelente resumen, muchas gracias compañero

Martín David Roldán

student•

: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.

Joel Dominguez Merino

student•

Gracias por el aporte Mario! En especial las pseudo-clases child son las que más se me complican diferenciar al momento de ponerlo en práctica. Suelo confundirlas un poco. Saludos :)

Patricio Manuel Ugarte

student•

Comparto mis apuntes de la clase:

Jiovanni Romo

student•

Wooooow! Que apunte tan genial utilizando las notas de Cornell! Podrias explicarme como fue que lograste que la pagina quedara con esos colores y el logo del curso? Me seria muy util!

Laura Daniela Moya Miranda

student•

super gracias

Irving Juárez

student•

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

Luis Bernaldo Morales Pérez

student•

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

Thomas Jeffery

student•

Que extensión utiliza para que se vean las etiquetas y valores de esos colores?

Héctor Eduardo López Carballo

student•

Hola!

Si te refieres al código en general, entonces es un tema y me parece que está usando este Outrun meets Synthwave

Ciro Alejandro Sira Mogollon

student•

yo uso color highlight. talvez te sirva

Camilo Torres camayo

student•

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; }

Christian Velázquez

student•

Gracias.

Isaac Aguirre

student•

¿Por que no me aparece el cambio de color?

<!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: green;
        }
    </style>
</head>
<body>
    <a href="/">Alicia</a>
</body>
</html>

Huilén Solís

student•

creo que es por que colocaste la etiqueta <style> dentro del head, y debe ir dentro del body.

Jose Ever Muñoz Muñoz

student•

tu código esta bien amigo, el style sí va en el head, ten en cuenta que la pseudoclase :link solo funciona con enlaces no visitados, y si usas la extensión live server de VSC, esta por alguna razón marca todos los link como ya visitados, si quieres ver que cambie usa el protocolo file como lo usa la profe, para hacerlo copia la ruta del archivo html y la pegas en el navegador y ya esta

Ciro Alejandro Sira Mogollon

student•

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: ":(";
}

Juan pablo Restrepo Muñoz

student•

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

David Galeano

student•

Se llama SynthWave '84

Diego Alejandro Presiga

student•

Tengo un problema. ¿Alguien sabe por qué me sale doble pseudoelemento?

El código está norma, solo me sucede en firefox dev y firefox normal

<!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: 'Soy un Before - ';
            padding:5px;
            border:1px solid rgb(91, 159, 236);
            margin-right:5px;
            color:rgb(26, 26, 27);
            display:inline-block;
        }

        div::after {
            content: ' - Soy un After';
        }
    </style>
</head>
<body>
    <div>Alicia</div>
</body>
</html>

Fernando Alejandro Yerena Ramos

student•

Puede ser que tengas una extensión en Firefox que añada ese <div class="betternet-wrapper"> extra en cada página. 🤓🍍🍍

Prueba desactivando una por una las extensiones para dar con la culpable. 👮‍♀️🚓

Diego Alejandro Presiga

student•

Muchas gracias por tu ayuda, efectivamente era una extensión que tenía instalada 🤗👊🏼

Laura Fernanda Martínez Ballesteros

student•

como hago que el código se refleje en la pagina ?

Mayra Lopez

student•

guardas el .css y refrescas la pagina donde lo aplicas

Giuseppe Ramirez

student•

Hola, Laura. Te recomiendo darle una mirada a uno estos dos cursos antes de ver este:

https://platzi.com/cursos/prework-windows/
https://platzi.com/cursos/prework-macos/ Te recomiendo tomar el que se acomode a tu sistema operativo. :) 💚

Laura Fernanda Martínez Ballesteros

student•

como descargo el tema synthwave '84 en mi computador ?

David Rodriguez

student•

Hola

Primero necesitas tener instalado VSCode, cuando lo abres vas a la herramienta de Extensiones y pones en el buscador synthwave y te debería de aparecer la opción para instalarlo. Tambien puedes descargarlo del marketplace de VSCode: https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode

Te recomiendo el curso de prework por si quieres saber que otras herramientas te serán útiles. https://platzi.com/clases/prework-windows/

Saludos.

Estefany Aguilar

teacher•

Holi ! Te comparto por aquí un Tweet que escribí con los pasos de instalación. Espero te sea útil... 😊💚

https://twitter.com/teffcode/status/1295746823190122498

Juan Diego Cabrera Remírez

student•

Aplicando Pseudo clases

Martha Liliana Dominguez Gonzalez

student•

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.

Jorge Fidel Zubieta Choque

student•

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.

Marcos Antonio Alegrette de León

student•

Holaa,esta clase me dejo dudando,es buena practica usar la etiqueta style en el head? o hay otra manera creando una extension css? nose sera que me da toc hacerlo ahi jajajaj

Christopher Andrés Guano Valencia

student•

¡Hola! La respuesta corta es depende del contexto. La respuesta larga la encuentras en esta clase https://platzi.com/clases/2477-frontend-developer-practico/42959-buenas-practicas-reflexion-y-advertencias/

¡Nunca pares de aprender! 💚

Jose Miguel Perdomo

student•

Lo que yo he entendido, es que en la versión final es mejor tenerlos separados pero como estas apenas maquetando no tiene nada de malo usar el style en html