WhatsApp

  
Pseudo-clases y Pseudo-elementos en CSS
¿Qué son y funcionalidad?


Pseudo-clases en CSS


Las pseudo-clases son selectores que te permiten seleccionar elementos basados en su estado o posición en el documento. Estas se aplican a elementos en situaciones específicas, como cuando un enlace está siendo visitado, un elemento está siendo señalado con el mouse, o un formulario está en un estado particular.

Pseudo-claseFuncionalidad
:hoverAplica estilos cuando el cursor del mouse se encuentra sobre el elemento.
:activeAplica estilos cuando el elemento está activo, por ejemplo, cuando se hace clic en un enlace o se presiona un botón.
:focusAplica estilos cuando el elemento ha recibido el foco, como un campo de entrada de texto que se ha seleccionado.
:visitedSelecciona enlaces que ya han sido visitados por el usuario.
:first-childSelecciona el primer hijo de un elemento.
:last-childSelecciona el último hijo de un elemento.
:nth-child()Selecciona un elemento basado en su posición dentro de un contenedor.
:nth-of-type()Selecciona un elemento basado en su posición dentro de un contenedor, teniendo en cuenta solo elementos del mismo tipo.
:nth-last-child()Selecciona un elemento basado en su posición desde el final del contenedor.
:nth-last-of-type()Selecciona un elemento basado en su posición desde el final del contenedor, teniendo en cuenta solo elementos del mismo tipo.
:not()Selecciona elementos que no coinciden con un selector especificado.
:checkedSelecciona elementos de entrada de tipo "checkbox" o "radio" que están marcados.
:disabledSelecciona elementos de entrada que están deshabilitados.
:enabledSelecciona elementos de entrada que están habilitados.



Ejemplos


Pseudo-elementos


Los pseudo-elementos permiten seleccionar y estilizar partes específicas de un elemento, como el primer párrafo, la primera letra, o incluso generar contenido antes o después del contenido real de un elemento..

Pseudo-elementoFuncionalidad
::first-lineSelecciona la primera línea de un elemento, como un párrafo o un encabezado.
::first-letterSelecciona la primera letra de un elemento.
::beforeInserta contenido antes del contenido real de un elemento.
::afterInserta contenido después del contenido real de un elemento.
::selectionSelecciona el texto que ha sido seleccionado por el usuario.
::placeholderEstiliza el texto de marcador de posición en un campo de entrada.
::markerEstiliza el marcador de lista de elementos de lista, como <li>.
::backdropEstiliza el fondo detrás de un elemento que está utilizando la propiedad backdrop-filter. Esto se usa para crear efectos de desenfoque y otros efectos.


Ejemplos

Sebastian Granados 8 febrero, 2024
Compartir
Categorías


Iniciar sesión dejar un comentario

  
¿Qué es Flask y por qué usarlo?
Descubre la Elegancia y Libertad del Desarrollo Web con Flask: Un Vistazo Profundo a un Microframework que Marca la Diferencia en Python