Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

1D
6H
0M
50S

Pseudo-clases y pseudo-elementos en las animaciones

3/20
Recursos

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.

Sintaxis

selector:pseudo-clase { propiedad: valor; }

:link

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

:visited

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

:hover

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

:not()

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

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

Pseudos-elementos

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

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.

::after

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

Contribuci贸n creada por Andr茅s Guano.

Aportes 46

Preguntas 13

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥渘o鈥, 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 鈥渟铆鈥, 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^=鈥淪wim鈥漖 dar铆a como posibles resultados category="Swimwear // category=鈥淪wimming鈥.
  • [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:

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

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

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

驴Alguien sabe cual es el tema que utiliza en VS Code la profe? 馃

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.

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.

Para los que no les funcione el :link con el color que sea, desde Visual Studio Code abran el archivo con clic derecho y den clic donde dice 鈥淐opiar ruta de acceso鈥 y luego la pegan en el navegador. De esta manera S脥 se puede ver el cambio de color o la diferencia entre :link y :visited 馃檪

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

Es dif铆cil no sentir aprecio a la forma de explicar de la profe. Gracias profe 馃槈

Muy buena clase, no sabia muy bien la diferencia entre pseudoclase y pseudoelemento
muchas gracias

me re gusto este curso

Aplicando Pseudo clases

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

Pseudoclases

Se crean con : luego de la clase que queremos seleccionar

  • link: Aplica los estilos a los links que no hayan sido clickeados (de la clase en espec铆fico)
  • visited: Aplica los estilos a los links que hayan sido clickeados (de la clase en espec铆fico)
  • hover: Aplica los estilos a los elementos de la clase a los cuales les pase el mouse por encima
  • not(): Aplica los estilos a los elementos que NO pertenezcan a la clase que se帽al茅
  • nth-child(# de hijo): Aplica los estilos al hijo # marcado en la pseudoclase

Pseudoelementos

Se crean con :: luego de la clase que queremos seleccionar

  • before: Con before y content agregamos informaci贸n antes de la clase seleccionada
  • after: Con after y content agregamos informaci贸n despu茅s de la clase seleccionada

Las pseudo-clases y pseudo-elementos en CSS son utilizados para seleccionar elementos basados en su estado o posici贸n en el documento HTML. En las animaciones, estas caracter铆sticas se pueden utilizar para crear efectos espec铆ficos y mejorar la experiencia de usuario.

Las pseudo-clases incluyen:

:hover: se aplica cuando un usuario coloca el cursor sobre un elemento.

:active: se aplica cuando un usuario hace clic en un elemento.

:focus: se aplica cuando un elemento tiene el foco, como cuando un usuario hace clic en un enlace o en un campo de texto.

Los pseudo-elementos incluyen:

::before: permite insertar contenido antes de un elemento.

::after: permite insertar contenido despu茅s de un elemento.

sin palabras encontr茅 mejor contenido afuera de platzi no se si es problema del profesor o que pero me arrepiento de haber visto los 2 anteriores cursos y empezar este perd铆 mucho tiempo de mi vida que se valoro en otra plataforma y otros creadores

Lastimosamente, este curso no debe ser etiquetado como B谩sico, ya que durante el desarrollo del c贸digo, hay muchas cosas que se dan por entendidas, dificultando el proceso de aprendizaje a los que estamos incursionando en este tema. Por favor tenerlo en cuenta, ser铆a ideal, que se explicar谩 cada cosa, paso a paso.

Que interesante esta pseudo-clase 鉁

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

<a href="./">Alicia</a>
<p>en el</p>
<p class="maravillas">pa铆s</p>

Muy buen repaso de pseudo-clases y pseudo-elementos!

Mi codigo de esta clase

  • Pseudo Clases
<!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: aquamarine;
      }
      p:not(.Maravillas) {
        color: blueviolet;
      }
      .container div:nth-child(1) {
        color: lightblue;
      }
    </style>
  </head>
  <body>
    <a href="/">Alicia</a>
    <p>En el</p>
    <p class="Maravillas">Pais</p>
    <div class="container">
      <div>Hola</div>
      <div>Como</div>
      <div>Estas</div>
    </div>
  </body>
</html>
  • 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: ":D ";
      }
      div::after {
        content: " :)";
      }
    </style>
  </head>
  <body>
    <div>Alicia</div>
  </body>
</html>

Yo intent茅 usar :link pero no me funcion贸, la soluci贸n que le di fue asignarle un color por defecto y luego con :visited se lo cambi茅.
Por si alguien tiene el mismo problema, tal vez esta pueda ser la soluci贸n.

a{
    color: #008b45;
}

a:visited{

    color: violet;
}

馃憼 Pseudo-clases y pseudo-elementos en las animaciones

Ideas/conceptos claves

Trigger es un accionador de 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.

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.

Recursos

Pseudo-classes - CSS | MDN

Pseudoelementos - CSS | MDN

Apuntes

  • Un concepto importante en las animaciones es un trigger
    • Una animaci贸n se ejecuta despu茅s de una acci贸n
    • Una acci贸n pueden ser: pasar por el elemento, dar click, hacer scroll, etc.
    • Para ello podemos usar pseudo-clases y pseudo-elementos

Pseudo Clases

/* Nos sirve para seleccionar enlaces que no fueron abiertos aun */
a:link {
  color: hotpink;
}

/* Nos sirve para seleccionar enlaces que fueron abiertos */
a:visited {
  color: tomato;
}

/* Nos sirve para aplicar estilos cuando el cursor esta encima */
a:hover {
  background-color: palegoldenrod;
}

/* Nos sirve para decir que no aplique los estilos a ciertos elementos */
p:not(.maravillas) {
  color: lightsalmon;
}

/* Nos ayuda a seleccionar elementos hijos */
.container div:nth-child(1) {
  color: lightseagreen;
}

Pseudo Elementos

/* Nos permite realizar cambios antes de un elemento */
div::before {
  content: ":)";
}

/* Nos permite realizar cambios despu茅s de un elemento */
div::after {
  content: ":(";
}

<aside>
馃搶 RESUMEN: Una animaci贸n se ejecuta despu茅s de una acci贸n (Trigger), Para aplicarlos podemos usar pseudo-elementos y pseudo-clases.

</aside>

Por fin tiramos c贸digo. Creo que 茅ste curso s铆 pertenec铆a al flujo original.

Ya me estaba preocupando.

:focus

Representa un elemento que ha recibido el foco. Como cuando el usuario hace clic sobre el elemento.

:active

Representa un elemento que el usuario esta activando. Generalmente la 鈥渁ctivaci贸n鈥 comienza cuando el usuario presiona el bot贸n primario del mouse y termina cuando lo suaelta.

:disabled

Representa cualquier elemento deshabilitado. Un elemento se encutra deshabilitado cuando no puede ser activado ni recibir el foco.

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

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.

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 鈥渁ctivaci贸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

鉂seudo-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.

Un trigger o disparador

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