Los selectores CSS han evolucionado de forma masiva a lo largo de los años, ofreciendo a los desarrolladores más poder para seleccionar elementos específicos en sus páginas. Los ejemplos de este artículo son parte de la especificación CSS para los Selectores de Nivel 4. Profundicemos e investiguemos siete de estos interesantes selectores, ¡te garantizo que usarás muchos de ellos en la práctica!
Selectores de Nivel 4
La especificación de Nivel 4 contiene ciertamente algunos selectores bien conocidos como nth-child, pero también contiene otros bastante singulares. Gran parte de la especificación de Nivel 4 describe muchas nuevas y útiles pseudo clases y pseudo selectores, por eso vamos a repasar cual es la diferencia entre los dos puntos simples y los dobles en lo que afecta a los pseudo elementos CSS.
Dos puntos sencillos frente a los dos puntos dobles
Como regla general, en la actualidad, los dos puntos dobles :: deberían usarse en lugar de los dos puntos simples : para diferenciar las pseudo-clases de los pseudo-elementos y el contenido tal y como se explica en la especificación.
Esta notación [los dos puntos dobles] se introdujeron… para establecer una distinción entre las pseudo clases y los pseudo-elementos. Por motivos de compatibilidad con las hojas de estilo actuales, los agentes de usuario también deben aceptar la anterior notación de los dos puntos simples para los pseudo-elementos introducidos en los niveles 1 y 2 de CSS (a saber, :first-line, :first-letter, :before y :after). Esta compatibilidad no está permitida para los nuevos pseudo elementos introducidos en el nivel 3 de CSS. – Especificación de W3C
Ok, queda claro, pero, ¿cuál es la diferencia entre las clases y los elementos?
Pseudo-clases frente a pseudo-elementos
Una pseudo clase está formada siempre por dos puntos sencillos : seguidos por el nombre de la pseudo-clase (la palabra clave) y, para las pseudo-clases funcionales, seguidos por uno o más argumentos entre paréntesis (parecido a las funciones CSS). Es un método para que los autores puedan especificar y seleccionar un estado concreto del elemento o elementos seleccionados.
Las pseudo-clases te permiten aplicar un estilo a un elemento no solo en relación con el contexto del árbol del documento, sino también en relación con factores externos como el historial del navegador (
:visited, por ejemplo), el estado de sus contenidos (como:checkeden ciertos elementos), o la posición del ratón (como hace:hover, que te permite saber si el ratón está situado sobre un elemento o no). – MDN Web Docs
Los pseudo-elementos crean abstracciones sobre el árbol del documento más allá de los especificados por el lenguaje del documento. Por ejemplo, los lenguajes de documento no ofrecen mecanismos para acceder a la primera letra (“first letter”) o a la primera línea “first line” del contenido de un elemento. Los pseudo-elementos permiten a los autores hacer referencia a estos, de no ser así no sería posible acceder a esta información.
Los pseudo-elementos también proporcionan a los autores un mecanismo para hacer referencia a contenido que no existe en el documento original, por ejemplo, los bien conocidos pseudo-elementos ::before y ::after de la especificación CSS2 que permiten generar contenido.
Ahora que tenemos la logística resuelta, profundicemos y exploremos algunos de estos intrigantes selectores CSS de nivel 4.
1. :matches()
La pseudo-clase :matches() es ciertamente un potente selector del nivel 4, pero los navegadores todavía están discutiendo su inclusión a excepción de Safari (WebKit).
Hablando en términos generales, puede usarse para combinar múltiples reglas de selectores en una sucinta línea. Acepta una lista de selectores como argumento. Estos argumentos pueden ser selectores compuestos y selectores complejos, sin embargo los selectores combinatorios no están permitidos.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* Chrome */ :-webkit-any(:hover, :focus, :active) { color: #222; } /* Firefox */ :-moz-any(:hover, :focus, :active) { color: #222; } /* Safari */ :matches(:hover, :focus, :active) { color: #222; } |
Aunque este fragmento combina todos nuestros estados generales para :hover, :focus, y :active en un conjunto de reglas, todavía no muestra el potencial que posee. Revisaremos un ejemplo más complejo dentro de poco:
Si estás familiarizado con los “anidamientos” prepárate para una sorpresa. Los emparejamientos se pueden combinar con otros selectores :matches para mimetizar esta misma característica que muchos usuarios de preprocesadores adoran, ¡pero mediante el propio CSS!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
:matches(section, article) :matches(h1, h2, h3, h4, h5, h6) { color: goldenrod; } /* equivalent to: */ section h1, section h2, section h3, section h4, section h5, section h6, article h1, article h2, article h3, article h4, article h5, article h6 { color: goldenrod; } |
Si te interesa, puedes incluso encadenarlos juntos para abrir un nuevo conjunto de posibilidades.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/* Firefox */ :-moz-any(a):-moz-any(:link, :visited) { color: blue; } :-moz-any(a):-moz-any(:hover, :focus, :active) { color: red; text-decoration: none; } /* Chrome */ :-webkit-any(a):-webkit-any(:link, :visited) { color: blue; } :-webkit-any(a):-webkit-any(:hover, :focus, :active) { color: red; text-decoration: none; } /* Safari */ :matches(a):matches(:link, :visited) { color: blue; } :matches(a):matches(:hover, :focus, :active) { color: red; text-decoration: none; } |
Este ejemplo es equivalente a escribir lo siguiente:
|
1 2 3 4 5 6 |
a:link, a:visited {…} a:hover, a:focus, a:active {…} |
Recuerda que
:matches() no puede anidarse (:matches(:matches()) y no funciona con :not()(:matches(:not()), :not(:matches())).
Por desgracia, la especificación para este selector solo se ha consolidado en Safari y todavía está a la espera de que otros navegadores lo soporten, de manera que mientras tanto tendrás que usar declaraciones independientes y prefijos. Actualmente, herramientas como Autoprefixer no soportan :matches(), pero no te preocupes, recientemente abrí un parte sobre la incidencia en GitHub solicitando su soporte.
Si tienes un ejemplo de uso de este selector y te apetece compartirlo, por favor, publícalo a través de un comentario en la sección de abajo. ¡Siempre nos encanta recibir deliciosas demos de CodePen!
2. :placeholder-shown
Los elementos input o campos de entrada tienen la opción de mostrar un texto a modo de ejemplo (placeholder) para indicarle al usuario qué tipo de información debería introducir. Esto ocurre cuando el atributo placeholder está presente en la etiqueta input de manera que se combina con este elemento mostrando el texto de ejemplo.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* affects entire input */ :placeholder-shown { opacity: 1; /* works */ color: gold; /* sketchy */ background: blue; /* works */ font-weight: bold; /* works */ border: 1px solid red; /* works */ } /* only affects placeholder text */ ::placeholder { opacity: 1; /* works */ color: gold; /* works */ background: goldenrod; /* works */ font-weight: bold; /* works */ border: 1px solid red; /* works */ } |
Esencialmente :placeholder-shown sirve para seleccionar el campo de entrada en sí cuando su texto de ejemplo está siendo mostrado frente a ::placeholder que aplica los estilos a dicho texto. De hecho existe documentación sobre la notación ::placeholder en CSS Pseudo-Elements Module Level 4 Editors Draft. Ten en cuenta que :placeholder-shown es una pseudo clase (es un elemento en un estado concreto) y ::placeholder es un pseudo elemento (algo visible que no existe realmente en el DOM).
Durante mi búsqueda descubrí que color era una propiedad concreta (cuando se aplica con :placeholder-shown para cambiar el color del texto de ejemplo) que solo soportaba Firefox, mientras que Chrome y Safari mantenían sin cambios el color gris del mismo.
-
3. :any-link
-
4. :indeterminate
-
5. :user-error
-
6. :optional
-
7. :scope
Deja una respuesta