CSS3 ha introducido una variedad de selectores avanzados que permiten a los diseñadores y desarrolladores web apuntar a elementos específicos con mayor precisión y eficiencia que nunca.
Estos selectores avanzados abren nuevas posibilidades para estilizar documentos HTML, permitiendo selecciones basadas en atributos, relaciones entre elementos, y más.
Selectores de Atributos
Los selectores de atributo en CSS3 permiten aplicar estilos a elementos HTML basados en la presencia, el valor específico, o la inclusión de ciertos valores dentro de los atributos de esos elementos.
Estos selectores ofrecen una gran flexibilidad y precisión, permitiendo a los diseñadores y desarrolladores dirigirse a elementos sin necesidad de clases o ID adicionales, basándose únicamente en características inherentes de los elementos HTML.
Lista de Selectores de Atributo con Ejemplos
[attr]
Selecciona elementos que tienen el atributo especificado, independientemente de su valor.
a[target] {
border: 1px solid blue;
}Aplica un borde azul a todos los enlaces (<a>) que tienen un atributo target.
[attr=value]
Selecciona elementos que tienen el atributo con un valor exacto.
input[type="text"] {
width: 100%;
}Establece el ancho al 100% para todos los inputs de tipo texto.
[attr^=value]
Selecciona elementos cuyo valor de atributo comienza con el valor especificado.
a[href^="https://"] {
color: green;
}Colorea de verde todos los enlaces que comienzan con “https://”.
[attr$=value]
Selecciona elementos cuyo valor de atributo termina con el valor especificado.
a[href$=".pdf"] {
font-weight: bold;
}Aplica negrita a los enlaces que terminan en “.pdf”.
[attr=value]*
Selecciona elementos cuyo valor de atributo contiene el valor especificado en cualquier parte.
a[href*="example"] {
text-decoration: underline;
}Subraya todos los enlaces que contienen “example” en su href.
[attr|=value]
Selecciona elementos cuyo valor de atributo es exactamente igual a un valor determinado o comienza con ese valor seguido de un guion (-).
div[lang|="en"] {
border: 1px solid black;
}Aplica un borde negro a los divs cuyo atributo lang es exactamente “en” o comienza con “en-“.
[attr~=value]
Selecciona elementos cuyo valor de atributo es una lista de palabras separadas por espacios y una de las palabras es exactamente el valor especificado.
div[class~="special"] {
color: red;
}Cambia el color de texto a rojo para los divs que tienen “special” como una de sus clases.
Estos selectores de atributo amplían enormemente las capacidades de CSS, permitiendo estilos más específicos y complejos sin alterar la estructura HTML subyacente.
Selectores Estructurales o de Posición
Los selectores estructurales o de posición en CSS3 permiten a los diseñadores y desarrolladores web dirigirse a elementos basándose en su posición relativa o estructural dentro del documento HTML.
Estos selectores son particularmente útiles para aplicar estilos a elementos que ocupan posiciones específicas en una lista, un contenedor o entre hermanos sin la necesidad de añadir clases o identificadores adicionales.
Lista de Selectores Estructurales con Ejemplos
:nth-child(an+b)
Selecciona el enésimo hijo de un elemento, según una fórmula.
li:nth-child(odd) {
background-color: grey;
}Aplica un fondo gris a cada elemento li impar dentro de un contenedor.
:nth-last-child(an+b)
Selecciona el enésimo hijo de un elemento, contando desde el último.
li:nth-last-child(2n) {
border-bottom: 1px solid black;
}Añade un borde inferior a cada segundo elemento li empezando por el último.
:first-child
Selecciona el primer hijo de un elemento.
div:first-child {
font-size: 20px;
}Cambia el tamaño de la fuente al primer div hijo de sus contenedores.
:last-child
Selecciona el último hijo de un elemento.
p:last-child {
margin-bottom: 0;
}Elimina el margen inferior del último párrafo dentro de cualquier contenedor.
:first-of-type
Selecciona el primer elemento de su tipo dentro de su contenedor.
p:first-of-type {
text-align: center;
}Centra el texto del primer párrafo dentro de sus respectivos contenedores.
:last-of-type
Selecciona el último elemento de su tipo dentro de su contenedor.
p:last-of-type {
color: blue;
}Cambia el color del texto a azul para el último párrafo dentro de sus contenedores.
:only-child
Selecciona un elemento que es el único hijo de su contenedor.
p:only-child {
padding: 10px;
}Aplica un relleno a los párrafos que son el único hijo de su contenedor.
:only-of-type
Selecciona un elemento que es el único de su tipo dentro de su contenedor.
h2:only-of-type {
margin-top: 0;
}Elimina el margen superior para los h2 que son el único de su tipo en sus contenedores.
:nth-of-type(an+b)
Selecciona el enésimo elemento de su tipo dentro de su contenedor.
p:nth-of-type(3n+1) {
font-weight: bold;
}Aplica negrita a cada tercer párrafo dentro de sus contenedores, comenzando con el primero.
:nth-last-of-type(an+b)
Selecciona el enésimo elemento de su tipo dentro de su contenedor, contando desde el último.
div:nth-last-of-type(2) {
background-color: lightblue;
}Establece un color de fondo azul claro para el penúltimo div dentro de sus contenedores.
Estos selectores estructurales ofrecen una gran potencia y flexibilidad para aplicar estilos basados en la posición de los elementos, facilitando la creación de diseños complejos y responsivos sin alterar el HTML.
Selectores de Negación
Los selectores de negación en CSS3, representados por :not(), ofrecen una manera poderosa de excluir elementos específicos de la selección de estilos.
Esta pseudo-clase permite a los diseñadores y desarrolladores aplicar estilos a todos los elementos que no coinciden con el selector especificado dentro de los paréntesis de :not().
Es particularmente útil para aplicar reglas generales mientras se excluyen ciertos elementos sin tener que clasificar cada caso individualmente.
Ejemplos de Selectores de Negación
:not(selector)
Excluye elementos que coinciden con el selector especificado.
div:not(.highlight) {
background-color: grey;
}Aplica un fondo gris a todos los div que no tienen la clase .highlight.
p:not(:first-child) {
margin-top: 20px;
}Añade un margen superior a todos los párrafos que no son el primer hijo de sus contenedores.
button:not([disabled]) {
cursor: pointer;
}Cambia el cursor a pointer para todos los botones que no estén deshabilitados.
input:not([type="submit"]):not([type="reset"]) {
border: 1px solid black;
}Aplica un borde a todos los inputs excepto a los de tipo submit y reset.
a:not(:hover) {
text-decoration: none;
}Elimina el subrayado de todos los enlaces excepto cuando se pasa el cursor sobre ellos.
El selector :not() puede ser extremadamente útil en situaciones donde se desea aplicar estilos de forma general pero se necesitan excepciones.
Por ejemplo, puede ser usado para aplicar estilos a todos los elementos excepto a aquellos que contienen una clase específica, o para excluir ciertos tipos de inputs de un estilo común.
Sin embargo, es importante tener en cuenta que la especificidad de :not() es la misma que la del selector más específico dentro de sus paréntesis.
Pseudo-clases de Enlace
Las pseudo-clases de enlace en CSS3 son selectores especiales que se aplican a los enlaces (<a> tags) en diferentes estados de interacción por parte del usuario.
Estas pseudo-clases permiten a los diseñadores web modificar la apariencia de los enlaces basándose en si han sido visitados, si el cursor está sobre ellos, o si están siendo activados, entre otros estados.
Esto es esencial para mejorar la usabilidad y la experiencia del usuario en un sitio web.
Ejemplos de Pseudo-clases de Enlace
:link
Selecciona todos los enlaces que aún no han sido visitados.
a:link {
color: blue;
}Establece el color de todos los enlaces no visitados a azul.
:visited
Selecciona todos los enlaces que el usuario ha visitado.
a:visited {
color: purple;
}Cambia el color de los enlaces visitados a púrpura.
:hover
Se activa cuando el usuario pasa el cursor sobre un enlace.
a:hover {
color: red;
}Cambia el color del enlace a rojo cuando el cursor se encuentra sobre él.
:active
Selecciona el enlace en el momento que es clickeado por el usuario.
a:active {
color: yellow;
}Cambia el color del enlace a amarillo cuando está siendo activado (clickeado).
:focus
Se aplica cuando un enlace ha recibido foco, ya sea a través del teclado (por ejemplo, navegación con tabulador) o mediante programación.
a:focus {
outline: 2px solid green;
}Añade un contorno verde alrededor del enlace cuando está enfocado.
El uso adecuado de estas pseudo-clases mejora significativamente la accesibilidad y la experiencia del usuario en un sitio web.
Proporcionan una retroalimentación visual clara sobre el estado de los enlaces, lo que ayuda a los usuarios a navegar más eficientemente.
Por ejemplo, cambiar el color de un enlace cuando el cursor está sobre él (:hover) o cuando está siendo clickeado (:active) indica claramente al usuario que el enlace es interactivo y está respondiendo a sus acciones.
Pseudo-clases de Entrada/Formulario
Las pseudo-clases de entrada/formulario en CSS3 se especializan en seleccionar elementos de formulario (<input>, <textarea>, <select>, etc.) basados en su estado.
Estas pseudo-clases permiten a los diseñadores web mejorar la interactividad y la retroalimentación visual de los formularios, mejorando así la experiencia del usuario durante la interacción con campos de entrada, selecciones y otros controles de formulario.
Ejemplos de Pseudo-clases de Entrada/Formulario
:enabled
Selecciona todos los elementos de formulario que están habilitados.
input:enabled {
background-color: white;
}Aplica un fondo blanco a todos los campos de entrada habilitados, facilitando su identificación como interactivos.
:disabled
Selecciona todos los elementos de formulario que están deshabilitados.
input:disabled {
background-color: grey;
}Cambia el fondo de los campos de entrada deshabilitados a gris, indicando que no están disponibles para la interacción
:checked
Se aplica a elementos de formulario como checkboxes y radio buttons que están marcados o seleccionados.
input[type="checkbox"]:checked {
box-shadow: 0 0 5px 5px green;
}Añade una sombra verde alrededor de los checkboxes marcados, resaltando su estado seleccionado.
:focus
Selecciona el elemento de formulario que tiene el foco.
input:focus {
border-color: blue;
}Destaca con un borde azul los campos de entrada cuando están enfocados, mejorando la visibilidad del campo activo.
:required
Selecciona todos los elementos de formulario que tienen el atributo required.
input:required {
border: 2px solid red;
}Resalta con un borde rojo los campos de entrada que son obligatorios, ayudando a los usuarios a identificar qué información debe ser proporcionada.
:optional
Selecciona todos los elementos de formulario que no tienen el atributo required.
input:optional {
opacity: 0.75;
}Atenua visualmente los campos opcionales, diferenciándolos de los obligatorios.
:valid
Selecciona todos los elementos de formulario cuyo contenido es válido según sus restricciones de validación.
input:valid {
border: 2px solid green;
}Aplica un borde verde a los campos de entrada con contenido válido, proporcionando una retroalimentación positiva inmediata.
:invalid
Selecciona todos los elementos de formulario cuyo contenido es inválido según sus restricciones de validación.
input:invalid {
border: 2px solid red;
}Indica con un borde rojo los campos de entrada con contenido inválido, señalando al usuario que la información proporcionada no cumple con los requisitos.
Las pseudo-clases de entrada/formulario son esenciales para crear formularios accesibles y amigables para el usuario.
Permiten a los diseñadores web proporcionar retroalimentación visual inmediata sobre el estado de los campos de entrada, lo cual es crucial para guiar a los usuarios a través del proceso de llenado de formularios.
Además, la capacidad de estilizar elementos basados en su validez ayuda a mejorar la experiencia del usuario al proporcionar indicaciones claras sobre errores de entrada o confirmación de datos correctos.
Pseudo-clases de UI
Las pseudo-clases de UI (Interfaz de Usuario) en CSS3 proporcionan una manera de aplicar estilos basados en el estado de los elementos de la interfaz de usuario, como su capacidad para ser seleccionados, el estado de su validación, o su interactividad.
Estas pseudo-clases son esenciales para diseñar interfaces más dinámicas y reactivas que responden al comportamiento del usuario.
Ejemplos de Pseudo-clases de UI
:hover
Se aplica a elementos sobre los cuales el usuario pasa el cursor.
button:hover {
background-color: lightblue;
}Cambia el color de fondo de los botones a azul claro cuando el cursor está sobre ellos, indicando que son interactivos.
:active
Selecciona el elemento que está siendo activado por el usuario.
a:active {
color: yellow;
}Cambia el color del texto de los enlaces a amarillo en el momento en que son clickeados, proporcionando una retroalimentación visual de la acción.
:focus
Se aplica al elemento que tiene el foco, como cuando se selecciona un campo de entrada.
input:focus {
border: 2px solid green;
}Resalta con un borde verde los campos de entrada cuando están enfocados, mejorando la visibilidad del campo activo.
:checked
Selecciona los elementos de formulario (checkboxes o radio buttons) que están marcados.
input[type="checkbox"]:checked {
background-color: grey;
}Aplica un fondo gris a los checkboxes marcados, visualizando su estado seleccionado.
:disabled
Se aplica a elementos de formulario que están deshabilitados.
button:disabled {
opacity: 0.5;
}Atenua los botones deshabilitados para indicar que no son interactivos.
:valid / :invalid
Seleccionan elementos de formulario basados en la validez de su contenido.
input:valid {
border: 2px solid blue;
}Aplica un borde azul a los campos de entrada con contenido válido.
:required / :optional
Distinguen entre elementos de formulario que son obligatorios u opcionales.
input:required {
background-color: lightyellow;
}Resalta los campos de entrada obligatorios con un fondo amarillo claro.
Las pseudo-clases de UI son herramientas cruciales para mejorar la accesibilidad y la experiencia del usuario en la web.
Permiten a los diseñadores crear interfaces claras y comprensibles, donde el estado y la funcionalidad de los elementos son fácilmente reconocibles.
Al utilizar estas pseudo-clases, se puede guiar al usuario a través de interacciones complejas de forma intuitiva, mejorando así la usabilidad general del sitio o aplicación web.
Pseudo-elementos
Los pseudo-elementos en CSS3 permiten a los diseñadores web acceder y estilizar partes específicas de un elemento HTML.
A diferencia de las pseudo-clases, que se aplican a un estado particular de un elemento, los pseudo-elementos se enfocan en estilizar segmentos específicos como el primer carácter, la primera línea, o incluso generar contenido antes o después de un elemento.
Estos selectores son fundamentales para crear diseños detallados y enriquecer la semántica y accesibilidad de los documentos web sin alterar la estructura HTML subyacente.
Ejemplos de Pseudo-elementos
::first-line
Aplica estilos a la primera línea de texto de un elemento de bloque
p::first-line {
font-weight: bold;
}Hace que la primera línea de todos los párrafos sea en negrita.
::first-letter
Selecciona la primera letra de un elemento de bloque y permite estilizarla de manera diferente.
p::first-letter {
font-size: 200%; float: left;
}Aumenta el tamaño de la primera letra de los párrafos y la sitúa fuera del bloque normal de texto.
::before / ::after
Inserta contenido antes o después del contenido de un elemento, respectivamente.
h1::before {
content: "★ ";
}Añade una estrella antes del texto de cada encabezado h1.
::selection
Aplica estilos al texto seleccionado por el usuario.
p::selection {
background: lightblue;
color: white;
}Cambia el fondo del texto seleccionado en los párrafos a azul claro y el texto a blanco.
Los pseudo-elementos son herramientas poderosas para los diseñadores web, ya que ofrecen un nivel de detalle y control sobre el estilo de los elementos que sería difícil de alcanzar de otra manera. Permiten:
- Mejorar la tipografía y el diseño de los textos sin necesidad de añadir elementos adicionales en el HTML.
- Crear elementos decorativos y mejorar la estética de una página sin sobrecargar el DOM.
- Implementar técnicas de diseño avanzadas, como íconos o adornos, directamente en la hoja de estilo.