es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


La guía definitiva de las pseudo-clases de CSS

Si usted es un principiante o un experimentado desarrollador de CSS, probablemente haya oído hablar de pseudo-clases . La pseudo-clase más conocida es probablemente :hover, que nos permite aplicarle un estilo a un elemento cuando está en estado de desplazamiento, es decir, cuando un dispositivo puntero, como un mouse, apunta hacia él.

Siguiendo el concepto de nuestras publicaciones anteriores en margin: auto y CSS Floats, echamos un vistazo más profundo a las pseudo-clases en esta publicación. Veremos qué son realmente las pseudo-clases, cómo funcionan, cómo podemos categorizarlas y cómo son diferentes de los pseudo-elementos .

¿Qué son las pseudo-clases?

Una pseudo-clase es una palabra clave que podemos agregar a los selectores de CSS para definir un estado especial del elemento HTML que pertenece. Podemos agregar una pseudoclase a un selector de CSS usando la sintaxis de dos puntos : así: a:hover{ ... }

Una clase CSS es un atributo que podemos agregar a los elementos HTML para los que queremos aplicar las mismas reglas de estilo, como los elementos del menú superior o los títulos de los widgets de la barra lateral. En otras palabras, podemos usar clases CSS para agrupar o clasificar elementos HTML que son similares de una forma u otra.

Las pseudo-clases son similares a ellas en el sentido de que también se usan para agregar reglas de estilo a los elementos que comparten la misma característica .

Pero mientras que las clases genuinas están definidas por el usuario y se pueden detectar en el código fuente, por ejemplo

, las pseudoclases se agregan mediante UA (agentes de usuario), como los navegadores web, en función del estado actual del elemento HTML perteneciente.

Propósito de las pseudo-clases

El trabajo de las clases regulares de CSS es clasificar o agrupar elementos . Los desarrolladores saben cómo se deben agrupar sus elementos: pueden formar clases como "elementos de menú", "botones", "miniaturas", etc. para agrupar, y posteriormente, elementos similares de estilo. Estas clasificaciones se basan en las características de los elementos que dan los propios desarrolladores .

Por ejemplo, si un desarrollador decide usar un

como un objeto de miniatura que él o ella puede clasificar
con una clase de "miniatura".

[...]

Sin embargo, los elementos HTML tienen sus propias características comunes basadas en su estado, posición, naturaleza e interacción con la página y el usuario. Estas son las características que normalmente no están marcadas en el código HTML, pero podemos orientarlas con pseudoclases en CSS, por ejemplo:

  • un elemento que es el último elemento dentro de su elemento primario
  • un enlace que se visita
  • un elemento que se ha ido a pantalla completa .

Estas son el tipo de características que generalmente son el objetivo de las pseudo clases. Para comprender mejor la diferencia entre las clases y las .last, supongamos que estamos utilizando la clase .last para identificar los últimos elementos en diferentes contenedores principales.

  • Artículo 1
  • ítem 2
  • artículo 3
  • artículo 4

Podemos diseñar estos últimos elementos secundarios con el siguiente CSS:

 li.last {text-transform: mayúscula; } option.last {font-style: italic; } 

Pero, ¿qué sucede cuando cambia el último elemento? Bueno, tendremos que mover la clase .last del anterior elemento anterior al actual.

Esta molestia de las clases de actualización puede dejarse al agente de usuario, al menos para aquellas características que son comunes entre los elementos (y ser un último elemento es tan común como puede ser). Tener una pseudoclase predefinida :last-child es muy útil. De esta forma, no es necesario que indiquemos el último elemento en el código HTML, pero aún podemos diseñarlos con el siguiente CSS:

 li: last-child {text-transform: mayúscula; } opción: last-child {font-style: italic; } 

Principales tipos de pseudo-clases

Hay muchos tipos de pseudoclases, todas ellas nos proporcionan formas de segmentar los elementos en función de sus características que, de otro modo, serían inaccesibles o más difíciles de acceder. Aquí hay una lista de pseudo clases estándar en MDN.

1. Pseudo-clases dinámicas

Las pseudo-clases dinámicas se agregan y eliminan dinámicamente de los elementos HTML, en función del estado al que hacen la transición en respuesta a las interacciones del usuario . Algunos de los ejemplos de pseudo-clases dinámicas son :hover :focus :hover :link, y :visited, todos los cuales se pueden agregar a la etiqueta de anclaje.

 a: visitado {color: # 8D20AE; } .button: hover, .button: focus {font-weight: bold; } 

2. Pseudo-clases basadas en el estado

Las pseudo-clases basadas en estado se agregan a los elementos cuando se encuentran en un estado estático particular . Algunos de sus ejemplos más conocidos son:

  • :checked que se puede aplicar para casillas de verificación ( )
  • :fullscreen para apuntar a cualquier elemento que se muestra actualmente en modo de pantalla completa
  • :disabled para elementos HTML que pueden estar en modo deshabilitado, como ,