👨‍💻 Las pseudoclases

Las pseudoclases en CSS son fundamentales para mejorar la interactividad y el estilo de tu página web. En este artículo, exploraremos qué son las pseudoclases, cómo usarlas, y los diferentes tipos disponibles. Aprenderás con ejemplos prácticos cómo aplicar estilos específicos cuando un usuario hace click, entre otras interacciones.

Índice

• Pseudoclases en CSS: ¿Qué son y como usar?
  • 1. ¿Qué son los pesudoclases en CSS?
  • 2. Para que sirven los pseudoclases en CSS.
  • 3. ¿Cómo usar los pseudoclases en CSS? Paso a paso.
  • 4. Tipos de pseudoclases.
  • 5. Pseudoclases y combinación de selectores.
  • 6. ¿Cuál es la diferencia entre pseudoclases y pseudoelementos?
  • 7. Preguntas frecuentes y resumen sobre pseudoclases en CSS

1. ¿Qué son los pesudoclases en CSS?

Las pseudoclases en CSS son palabras clave especiales que se agregan a los selectores CSS para especificar un estado o comportamiento particular de un elemento HTML.

A diferencia de las clases y los IDs, que se utilizan para seleccionar y aplicar estilo a elementos HTML en función de su nombre o atributo, las pseudoclases permiten aplicar estilos a estos elementos HTML en función de su estado, posición en el documento, o interacciones del usuario, sin necesidad de añadir clases adicionales en el HTML.

EJEMPLO:

En este ejemplo, al aplicar o agregar el pseudoclase :hover a la etiqueta HTML <a> lo que estamos logrando es aplicar un estilo de color rojo y subrayado a todas esas etiquetas <a> cuando el cursor del mouse pasa sobre ellos.

1.1. ¿Cómo se escriben las pseudoclases? Sintaxis:

Las pseudoclases se escriben detrás del selector principal, separadas por dos puntos (:):

selector:pseudoclase {
  propiedad: valor;
}Lenguaje del código: CSS (css)

2. Para que sirven los pseudoclases en CSS.

Las pseudoclases en sirven para aplicar estilos CSS a elementos en función de su estado, posición en el documento, o interacciones del usuario sin necesidad de modificar el HTML.

Permiten diseñar páginas web más dinámicas y responsivas de manera más eficiente y con menos código. A continuación, se describen algunos usos clave de las pseudoclases y ejemplos de cómo mejoran la experiencia de usuario y el diseño web.

Usos más comunes de los pseudoclases en páginas web:

2.1. Mejorar la experiencia del usuario:

:hover:

Cambia el estilo de un elemento cuando el cursor del mouse pasa sobre él. Se usa para resaltar enlaces, botones, menús y otros elementos interactivos, brindando retroalimentación visual al usuario.

:focus:

Aplica estilos cuando un elemento tiene el foco del teclado. Útil para resaltar campos de formulario, botones de radio y otros elementos que requieren atención del usuario.

:active:

Cambia el estilo de un elemento cuando está activado (por ejemplo, cuando se hace clic en él). Se usa para indicar la selección de un elemento, como un botón o una casilla de verificación.

2.2. Estilos dinámicos según el estado del elemento (normalmente en FORMULARIOS):

:checked:

Aplica estilos a elementos de formulario marcados (casillas de verificación, botones de radio).

:disabled:

Aplica estilos a elementos de formulario deshabilitados.

:required:

Aplica estilos a elementos de formulario obligatorios.

:valid:

Aplica estilos a elementos de formulario que pasan la validación.

:invalid:

Aplica estilos a elementos de formulario que no pasan la validación.

2.3. Organización y estructura:

:first-child:

Aplica estilos al primer elemento hijo de un contenedor.

:last-child:

Aplica estilos al último elemento hijo de un contenedor.

:nth-child(n):

Aplica estilos al n-ésimo elemento hijo de un contenedor.

:nth-of-type(n):

Aplica estilos al n-ésimo elemento de un tipo específico dentro de un contenedor.

:not(:first-child):

Aplica estilos a todos los elementos hijos excepto al primero.

:not(:last-child):

Aplica estilos a todos los elementos hijos excepto al último.

2.4. Creación de contenido generado (normalmente para elementos hijos de un contenedor):

::before:

Agrega contenido generado antes del elemento.

::after:

Agrega contenido generado después del elemento. Se usa para insertar viñetas decorativas, íconos, bordes personalizados y otros elementos visuales.

2.5. Estilos específicos para navegadores o dispositivos:

:-webkit- (Chrome y Safari):

Aplica estilos específicos para navegadores webkit.

:-moz- (Firefox):

Aplica estilos específicos para el navegador Firefox.

:-ms- (Edge e Internet Explorer):

Aplica estilos específicos para navegadores Microsoft.

:-o- (Opera):

Aplica estilos específicos para el navegador Opera.

2.6. Ejemplos de uso en la práctica con pseudoclases:

• Cambiar el color de un botón a rojo cuando se hace clic en él.
• Resaltar un campo de formulario cuando está vacío y el usuario comienza a escribir.
• Mostrar un icono de verificación junto a una casilla de verificación marcada.
• Agregar una línea divisoria decorativa entre elementos de una lista.
• Adaptar el diseño de la página web para diferentes tamaños de pantalla (responsive design).

3. ¿Cómo usar los pseudoclases en CSS? Paso a paso.

1. Identificar la necesidad:
2. Elegir la pseudoclase adecuada:
3. Escribir la regla CSS:
4. Probar y ajustar:

3.1. Identificar la necesidad:

• ¿Qué quieres lograr?: ¿Deseas cambiar el aspecto de un elemento al pasar el mouse sobre él? ¿Resaltar un formulario no válido? ¿Agregar un icono decorativo?
• ¿Qué elemento HTML quieres modificar?: Define el selector principal que representa el elemento al que deseas aplicar estilos.

3.2. Elegir la pseudoclase adecuada:

• Consulta la lista de pseudoclases disponibles: Existen muchas pseudoclases que cubren diversos estados y comportamientos (en el punto 4 dejamos una lista de los diferentes tipos de pseudoclases).
• Elige la que mejor se adapte a tu necesidad: Por ejemplo, si quieres cambiar el color de un enlace al pasar el mouse sobre él, utiliza :hover.

3.3. Escribir la regla CSS:

• Usa la sintaxis correcta: Asegurarte de usar la sintaxis correcta para aplicar estas pseudoclases (en el punto 1.1. dejamos como debe ser la sintaxis).
• Escribe las reglas CSS: Una vez que te hayas asegurado de seleccionar el elemento HTML usando el pseudoclase adecuado, escribe la reglas entre los corchetes {}.
• Especificidad: Asegúrate de que tu selector sea lo suficientemente específico para seleccionar solo el elemento deseado.

3.4. Probar y ajustar:

• Visualiza tu página web en un navegador: Observa cómo se aplica la pseudoclase y realiza ajustes si es necesario.
• Utiliza las herramientas de desarrollo del navegador: Para inspeccionar elementos y verificar la aplicación de estilos CSS.

EJEMPLOS DE USOS Y CÓDIGOS COMUES DE PSEUDOCLASES:

1. Cambiar el color de un botón al hacer clic:

button:active {
  background-color: #007bff;
  color: white;
}Lenguaje del código: CSS (css)

2. Resaltar un campo de formulario vacío:

input:required:empty {
  border: 2px solid red;
}Lenguaje del código: CSS (css)

3. Agregar una línea divisoria entre elementos de una lista:

li::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin-top: 5px;
}Lenguaje del código: CSS (css)

4. Mostrar un icono de verificación junto a una casilla de verificación marcada:

input[type="checkbox"]:checked + label::after {
  content: "✔";
  display: inline-block;
  margin-left: 5px;
}Lenguaje del código: CSS (css)

5. Resaltar un enlace cuando el cursor pasa sobre él y agregar un texto descriptivo:

a:hover {
  text-decoration: underline;
  background-color: #f0f0f0;
}

a:hover::after {
  content: " (Más información)";
  color: #999;
  font-size: 0.8em;
}Lenguaje del código: CSS (css)

RECUERDA: Las posibilidades son infinitas. Explora las diferentes pseudoclases disponibles y experimenta con ellas para crear diseños web únicos y dinámicos.

4. Tipos de pseudoclases.

A continuación dejamos una lista de los tipo de pseudoclases mas usados:

1. Pseudoclases de enlaces:
2. Pseudoclases de interacción:
3. Pseudoclases de estado:
4. Pseudoclases de estructura:
5. Pseudoclase de negación:

4.1. Pseudoclases de enlaces:

Las pseudoclases de enlaces en CSS te permiten modificar la apariencia de los enlaces HTML en función de su estado:

La pseudoclase :link se utiliza para seleccionar todos los enlaces no visitados. Es útil para aplicar estilos específicos a los enlaces que el usuario aún no ha visitado. Por ejemplo, a:link { color: blue; } hará que todos los enlaces no visitados sean azules.

La pseudoclase :visited permite aplicar estilos a los enlaces que ya han sido visitados. Esto ayuda a los usuarios a identificar qué enlaces ya han seguido. Por ejemplo, a:visited { color: purple; } hará que los enlaces visitados sean de color púrpura.

La pseudoclase :hover se activa cuando el usuario pasa el cursor sobre un elemento. Es útil para crear efectos de interacción visual. Por ejemplo, a:hover { color: red; } cambiará el color de los enlaces a rojo cuando el cursor pase sobre ellos.

La pseudoclase :active se activa cuando un enlace está siendo activado (por ejemplo, al hacer clic en él). Puede usarse para dar retroalimentación visual. Por ejemplo, a:active { color: green; } hará que los enlaces se vuelvan verdes mientras están siendo clicados.

4.2. Pseudoclases de interacción:

Las pseudoclases de interacción en CSS te permiten modificar la apariencia de los elementos HTML en función de la interacción del usuario con ellos:

La pseudoclase :hover se activa cuando el usuario pasa el cursor sobre un elemento. Es útil para crear efectos de interacción visual. Por ejemplo, a:hover { color: red; } cambiará el color de los enlaces a rojo cuando el cursor pase sobre ellos.

La pseudoclase :focus se aplica a un elemento cuando éste recibe el foco, como cuando se hace clic en un campo de entrada. Esto permite resaltar el campo activo. Por ejemplo, input:focus { border-color: blue; } cambiará el borde a azul.

La pseudoclase :active se activa cuando un enlace está siendo activado (por ejemplo, al hacer clic en él). Puede usarse para dar retroalimentación visual. Por ejemplo, a:active { color: green; } hará que los enlaces se vuelvan verdes mientras están siendo clicados.

Otras pseudoclases de interacción:

• :not(:hover): Aplica estilos a los elementos que no tienen el cursor del mouse sobre ellos.
• :focus-within: Aplica estilos al elemento que tiene el foco o a sus elementos hijos.
• :focus-visible: Similar a :focus, pero solo se aplica cuando el foco es visible (por ejemplo, al usar el tabulador).

4.3. Pseudoclases de estado:

Las pseudoclases de estado en CSS te permiten modificar la apariencia de los elementos HTML en función de su estado actual:

La pseudoclase :checked se aplica a los elementos de formulario que están seleccionados, como casillas de verificación y botones de radio. Esto permite aplicar estilos específicos cuando están marcados. Ejemplo: input:checked { background-color: yellow; } cambiará el fondo a amarillo.

La pseudoclase :disabled se utiliza para aplicar estilos a los elementos de formulario que están deshabilitados. Esto previene cualquier interacción con ellos y puede ser útil para mostrar que un campo no está disponible. Ejemplo: input:disabled { background-color: grey; }.

La pseudoclase :enabled se aplica a los elementos de formulario que están habilitados y disponibles para la interacción del usuario. Es útil para aplicar estilos específicos a estos elementos. Ejemplo: input:enabled { border-color: green; } cambiará el borde a verde.

Otras pseudoclases de estado:

• :empty: Aplica estilos a los elementos que no contienen ningún contenido.
• :valid: Aplica estilos a los elementos de formulario que pasan la validación.
• :invalid: Aplica estilos a los elementos de formulario que no pasan la validación.
• :required: Aplica estilos a los elementos de formulario obligatorios.
• :nth-child(n): Aplica estilos al n-ésimo hijo de un contenedor.
• :first-child: Aplica estilos al primer hijo de un contenedor.
• :last-child: Aplica estilos al último hijo de un contenedor.

4.4. Pseudoclases de estructura:

Las pseudoclases de estructura en CSS te permiten seleccionar y modificar elementos HTML en función de su posición o relación dentro del árbol DOM:

La pseudoclase :first-child selecciona el primer hijo de su padre. Es útil para aplicar estilos específicos al primer elemento dentro de un contenedor. Por ejemplo, p:first-child { font-weight: bold; } hará que el primer párrafo dentro de un contenedor sea negrita.

La pseudoclase :last-child selecciona el último hijo de su padre. Es útil para aplicar estilos al último elemento dentro de un contenedor. Por ejemplo, p:last-child { color: red; } cambiará el color del último párrafo dentro de un contenedor a rojo.

La pseudoclase :nth-child(n) selecciona el n-ésimo hijo de su padre. Es útil para aplicar estilos a elementos específicos en una lista. Por ejemplo, li:nth-child(2) { background-color: yellow; } hará que el segundo elemento de una lista tenga un fondo amarillo.

La pseudoclase :nth-of-type(n) selecciona el n-ésimo hijo de su tipo (etiqueta) de su padre. Es útil para aplicar estilos a elementos específicos basados en su tipo. Por ejemplo, p:nth-of-type(3) { font-size: 20px; } hará que el tercer párrafo tenga un tamaño de fuente de 20px.

La pseudoclase :not(:first-child) selecciona todos los elementos que no son el primer hijo de su padre. Es útil para excluir el primer elemento al aplicar estilos. Por ejemplo, div:not(:first-child) { margin-top: 10px; } agregará un margen superior de 10px a todos los divs excepto al primero.

Otras pseudoclases de estructura:

• :even: Selecciona elementos con un índice par.
• :odd: Selecciona elementos con un índice impar.
• :first: Similar a :first-child, pero también selecciona elementos que no tienen hermanos.
• :last: Similar a :last-child, pero también selecciona elementos que no tienen hermanos.

4.5. Pseudoclase de negación:

La pseudoclase de negación :not() en CSS te permite seleccionar elementos que no coinciden con un selector específico.

La pseudoclase de negación :not() te permite seleccionar elementos que no coinciden con un selector específico. Por ejemplo, p:not(.importante) {color: gray;} selecciona todos los párrafos excepto los que tienen la clase «importante»

Casos de uso de :not():

• Excluir elementos de un diseño: Si deseas aplicar estilos a una lista de elementos pero no a algunos elementos específicos, puedes usar :not() para excluirlos.
• Crear diseños condicionales: Puedes usar :not() en conjunto con media queries para aplicar estilos diferentes en función del tamaño de pantalla o de otras condiciones.
• Mejorar la accesibilidad: Puedes usar :not() para excluir elementos del foco del teclado o de la lectura de pantalla, mejorando la accesibilidad para usuarios con discapacidades.

5. Pseudoclases y combinación de selectores.

Combinar pseudoclases con otros selectores en CSS permite crear reglas de estilo más específicas y potentes, lo que da lugar a diseños más precisos y dinámicos.

EJEMPLOS sobre cómo combinar pseudoclases con diferentes tipos de selectores:

1. Combinación con Selectores de Clase
2. Combinación con Selectores de ID
3. Combinación con Selectores de Atributo
4. Combinación con Selectores de Descendencia
5. Combinación con Selectores de Hermano Adyacente
6. Combinación con Selectores de Hermano General

5. 1. Combinación con Selectores de Clase

Puedes aplicar una pseudoclase a elementos que también tienen una clase específica.

.button:hover {
    background-color: blue;
    color: white;
}Lenguaje del código: CSS (css)

Descripción:

• Se aplica el estilo a los elementos con la clase button cuando el usuario pasa el cursor sobre ellos.
• El botón cambia su fondo a azul y el texto a blanco al pasar el cursor.

5. 2. Combinación con Selectores de ID

Puedes aplicar una pseudoclase a un elemento que tiene un ID específico.

#main-header:focus {
    outline: 2px solid red;
}Lenguaje del código: CSS (css)

Descripción:

• Se aplica el estilo al elemento con el ID main-header cuando recibe el foco.
• Aparece un contorno rojo alrededor del encabezado principal cuando se hace clic en él.

5. 3. Combinación con Selectores de Atributo

Puedes aplicar una pseudoclase a elementos que tienen un atributo específico.

input[type="text"]:focus {
    border-color: green;
}Lenguaje del código: CSS (css)

Descripción:

• Se aplica el estilo a los campos de entrada de tipo text cuando reciben el foco.
• El borde del campo de texto cambia a verde cuando se hace clic en él.

5. 4. Combinación con Selectores de Descendencia

Puedes aplicar una pseudoclase a elementos que son descendientes de otro elemento.

nav a:hover {
    text-decoration: underline;
}Lenguaje del código: CSS (css)

Descripción:

• Se aplica el estilo a los enlaces dentro del elemento nav cuando el usuario pasa el cursor sobre ellos.
• Los enlaces dentro del menú de navegación se subrayan al pasar el cursor.

5. 5. Combinación con Selectores de Hermano Adyacente

Puedes aplicar una pseudoclase a un elemento que es el hermano adyacente de otro elemento.

h1 + p:first-child {
    font-weight: bold;
}Lenguaje del código: CSS (css)

Descripción:

• Se aplica el estilo al primer párrafo que sigue directamente a un encabezado h1.
• El primer párrafo después de un h1 se muestra en negrita.

5. 6. Combinación con Selectores de Hermano General

Puedes aplicar una pseudoclase a todos los elementos hermanos que siguen a un elemento específico.

h2 ~ p:last-child {
    color: grey;
}Lenguaje del código: CSS (css)

Descripción:

• Se aplica el estilo al último párrafo que sigue a cualquier h2.
• El último párrafo después de un h2 se muestra en color gris.

6. ¿Cuál es la diferencia entre pseudoclases y pseudoelementos?

Característica	Pseudoclases	Pseudoelementos
Propósito	Estilizar estados o condiciones especiales de los elementos existentes	Estilizar partes específicas del contenido de un elemento
Sintaxis	:pseudoclase	::pseudoelemento
Modifica el DOM	No	No, pero puede añadir contenido ficticio visible
Ejemplos	:hover, :focus, :nth-child(n)	::before, ::after, ::first-line
Compatibilidad	Amplia, también con un solo :	Usar :: es la norma, pero algunos aceptan un solo : para compatibilidad con versiones anteriores
Uso Común	Estados de interacción del usuario, orden de los hijos	Añadir contenido decorativo, estilizar partes específicas del texto

7. Preguntas frecuentes y resumen sobre pseudoclases en CSS

Las pseudoclases en CSS son palabras clave precedidas por dos puntos (:) que permiten aplicar estilos a elementos en función de su estado o posición en el DOM. Ejemplo: :hover cambia el estilo cuando el usuario pasa el cursor sobre un elemento.

Las pseudoclases (:) seleccionan elementos según su estado (ej. :hover), mientras que los pseudo-elementos (::) crean partes de un elemento (ej. ::before, ::after) para agregar contenido sin modificar el HTML.

Las más comunes son: :hover (cursor sobre elemento), :focus (campo de formulario activo), :nth-child() (selección de elementos específicos), :first-child y :last-child (primer y último hijo de un contenedor).

:hover permite cambiar estilos cuando el usuario pasa el cursor sobre un elemento. Ejemplo: a:hover { color: red; } cambiará el color del enlace a rojo cuando se pase el mouse por encima.

Para seleccionar elementos pares usa :nth-child(even) y para impares :nth-child(odd). Ejemplo: li:nth-child(even) { background: lightgray; } aplica fondo gris a los elementos pares.

La pseudoclase :focus aplica estilos a un campo cuando recibe el foco. Ejemplo: input:focus { border: 2px solid blue; } cambia el borde a azul cuando el usuario selecciona el campo.

:active cambia el estilo mientras un elemento es presionado. Ejemplo: button:active { background-color: red; } cambia el fondo del botón a rojo mientras se mantiene presionado.

La pseudoclase :visited aplica estilos a enlaces ya visitados. Ejemplo: a:visited { color: purple; } hará que los enlaces visitados aparezcan en color morado.

Usa :first-child para aplicar estilos al primer hijo de un contenedor. Ejemplo: p:first-child { font-weight: bold; } hará que el primer párrafo de un contenedor tenga texto en negrita.

:last-child selecciona el último hijo de un contenedor. Ejemplo: li:last-child { color: red; } hará que el último elemento de una lista tenga texto rojo.

Bibliografía

https://www.apinem.com/