En CSS, las pseudoclases CSS y los pseudoelementos CSS son herramientas poderosas que nos permiten aplicar estilos específicos a elementos seleccionados. Estas características nos brindan un mayor control y flexibilidad al diseñar y personalizar nuestros sitios web.
Pseudoclases
Definición y uso
Las pseudoclases CSS son palabras clave que se añaden a los selectores de CSS para seleccionar elementos según su estado o interacción con el usuario. Podemos utilizarlas para aplicar estilos a enlaces cuando se encuentran en estado de hover (cuando el cursor se sitúa sobre ellos), para resaltar enlaces visitados, o incluso para estilizar el primer hijo o el último hijo de un elemento en particular.
Ejemplos populares de pseudoclases
Algunas pseudoclases CSS comunes incluyen :hover, :active, :visited, :first-child y :last-child. Por ejemplo, podemos utilizar a:hover para cambiar el color de fondo de un enlace cuando el cursor se sitúa sobre él, o li:first-child para aplicar estilos especiales al primer elemento de una lista.
Vamos a crear esta estructura HTML para realizar un ejemplo.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<h3>¡Ejemplo de Pseudoclases CSS!</h3>
<ul>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
<li><a href="#">Enlace 4</a></li>
</ul>
</body>
</html>
Aquí abajo podemos ver los estilos CSS con las pseudoclases que vamos a utilizar.
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
* {
font-family: 'Lato', sans-serif;
}
/* Estilos para el enlace cuando se encuentra en estado de hover */
a:hover {
color: red!important;
}
/* Estilos para el enlace cuando ha sido pulsado */
a:focus {
color:orange!important;
}
/* Estilos para el primer enlace de la lista */
li:first-child a {
font-weight: bold;
color: brown;
}
/* Estilos para el último enlace de la lista */
li:last-child a {
color: green;
}
Y aquí tenemos el ejemplo de código en vivo utilizando JSFiddle.
See the Pen Ejemplo de Pseudoclases CSS by Jesus (@vazquezdesigner) on CodePen.
Listado de las pseudoclases CSS más utilizadas
Consejos y buenas prácticas
Al utilizar pseudoclases CSS, es importante tener en cuenta algunas buenas prácticas. Evita el abuso de pseudoclases, ya que un exceso de ellas puede complicar el mantenimiento del código. Además, considera la accesibilidad al aplicar estilos basados en interacciones del usuario, asegurándote de que los enlaces visitados sean claramente distinguibles. Mejora la experiencia del usuario utilizando pseudoclases para proporcionar retroalimentación visual durante la interacción.
Pseudoelementos
Definición y uso
Los pseudoelementos CSS nos permiten agregar contenido adicional o estilizar partes específicas de un elemento sin modificar el HTML subyacente. Estos pseudoelementos crean virtualmente elementos secundarios dentro del elemento seleccionado, brindándonos mayor control sobre el diseño y la presentación.
Ejemplos populares de pseudoelementos
Algunos pseudoelementos CSS ampliamente utilizados son ::before, ::after, ::first-line y ::first-letter. Con p::first-line, podemos aplicar estilos únicos a la primera línea de un párrafo, mientras que con h2::before podemos agregar contenido antes de cada encabezado de nivel 2.
Creamos como ejemplo esta estructura HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<h3>¡Ejemplo de Pseudoelementos CSS!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>
Aquí abajo podemos ver los estilos CSS con los pseudoelementos que vamos a utilizar.
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
* {
font-family: 'Lato', sans-serif;
}
/* Estilos para agregar contenido antes del párrafo */
p::before {
content: "Antes del texto: ";
font-weight: bold;
}
/* Estilos para agregar contenido después del párrafo */
p::after {
content: " Después del texto.";
font-style: italic;
color: blue;
}
/* Estilos para la primera letra del párrafo */
p::first-letter {
font-size: 2em;
color: red;
}
Y aquí tenemos el ejemplo de código en vivo utilizando JSFiddle.
See the Pen Pseudoelementos CSS by Jesus (@vazquezdesigner) on CodePen.
Listado de las pseudoclases CSS más utilizadas
::before Permite agregar contenido antes del contenido del elemento seleccionado.
::after Permite agregar contenido después del contenido del elemento seleccionado.
::first-letter Selecciona la primera letra del contenido del elemento.
::first-line Selecciona la primera línea del contenido del elemento.
::selection Selecciona el texto o el contenido que ha sido seleccionado por el usuario.
::placeholder Estiliza el texto de marcador de posición en un campo de entrada.
::marker Estiliza los marcadores de lista (por ejemplo, viñetas o números) en elementos de lista.
::backdrop Estiliza el fondo detrás de un elemento modal o en pantalla completa.
::before-page Permite agregar contenido antes de cada página impresa.
::after-page Permite agregar contenido después de cada página impresa.
::first-page Estiliza el contenido de la primera página impresa.
::left-page Estiliza el contenido de las páginas impares impresas.
::right-page Estiliza el contenido de las páginas pares impresas.
Estos son solo algunos de los pseudoelementos más utilizados en CSS. Cada pseudoelemento permite estilizar partes específicas de un elemento o agregar contenido adicional. Recuerda que no todos los pseudoelementos son compatibles con todos los elementos HTML y algunos pueden tener un soporte limitado en ciertos navegadores.
Consejos y buenas prácticas
Al utilizar pseudoelementos CSS, ten en cuenta la compatibilidad con navegadores, ya que algunos pseudoelementos pueden tener un soporte limitado en versiones más antiguas. Mantén tu código limpio y semántico al utilizar pseudoelementos de manera efectiva, evitando su abuso y asegurándote de que mejoren la estructura y presentación del contenido. Además, considera el rendimiento, ya que algunos pseudoelementos pueden requerir un procesamiento adicional.
Conclusiones
Las pseudoclases CSS y los pseudoelementos CSS son herramientas esenciales en el arsenal de un desarrollador web. Su uso adecuado nos permite crear estilos interactivos y personalizados, mejorando la experiencia de usuario y la presentación de nuestros sitios web. A medida que te familiarices con estas poderosas características de CSS, podrás utilizarlas de manera efectiva para crear diseños atractivos y sofisticados.
Preguntas y respuestas
Las pseudoclases CSS son palabras clave que se agregan a los selectores CSS y permiten seleccionar elementos en diferentes estados o condiciones específicas, como enlaces visitados, elementos con el cursor sobre ellos, elementos activos, entre otros. Los pseudoelementos CSS, por otro lado, permiten seleccionar y estilizar partes específicas de un elemento, como el primer elemento hijo, el primer elemento de tipo específico, o incluso agregar contenido adicional antes o después del contenido real de un elemento.
Algunos ejemplos comunes de pseudoclases CSS incluyen :hover, :active, :visited, :focus, :first-child, :last-child, :nth-child, entre otros. Estas pseudoclases se aplican a selectores CSS y permiten estilizar elementos en función de su estado o posición dentro de una estructura.
Algunos ejemplos de pseudoelementos CSS incluyen ::before, ::after, ::first-letter y ::first-line. Estos pseudoelementos permiten agregar contenido adicional antes o después del contenido real de un elemento, estilizar la primera letra de un bloque de texto, o estilizar la primera línea de un bloque de texto, respectivamente.
