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:
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.
Clave tu aporte maestro, ojala no se pierda y muchos la vean.
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.
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
Muy buenos recursos como siempre para tenerlos a mano ✨
Gracias!
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.
la diferencia es del cielo a la tierra, antes era innecesariamente caótico
¡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!
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:":(";}
Bien explicado!!!
Excelente resumen, muchas gracias compañero
: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.
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 :)
Comparto mis apuntes de la clase:
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!
super gracias
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
Pseudo-elements
Que extensión utiliza para que se vean las etiquetas y valores de esos colores?
Hola!
Si te refieres al código en general, entonces es un tema y me parece que está usando este Outrun meets Synthwave
yo uso color highlight. talvez te sirva
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 doblesSintaxis
creo que es por que colocaste la etiqueta <style> dentro del head, y debe ir dentro del body.
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
para los que les gusta tener el html y el css separado se los dejo aqui
como descargo el tema synthwave '84 en mi computador ?
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
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.
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
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
