Flash Sale! Save on unlimited courses & creative assets downloads! Flash Sale! Save 40%
Advertisement
  1. Web Design
  2. CSS
Webdesign

Intrigantes Selectores CSS de Nivel 4

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

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 :checked en 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.

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!

Si te interesa, puedes incluso encadenarlos juntos para abrir un nuevo conjunto de posibilidades.

Este ejemplo es equivalente a escribir lo siguiente:

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.

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

La pseudo-clase :any-link representa un elemento que actúa como ancla de origen de un hiperenlace.

Por ejemplo, en HTML5, cualquier elemento <a>, <area>, o <link> con un atributo href son hiperenlaces que se corresponden con :any-link y que son equivalentes a :matches(:link, :visited). En mi opinión se trata de un selector realmente peculiar y todavía está aparentemente a la espera de un mejor nombre, sin embargo su soporte en los navegadores es bastante amplio a excepción de Edge.

Autoprefixer es compatible actualmente con esta propiedad y proporciona los adecuados prefijos propietarios para los navegadores que los precisen.

4. :indeterminate

La pseudo-clase :indeterminate es un selector pensado para elementos concretos de formulario y se aplica a todos los medios.

Normalmente este selector se corresponderá con campos de entrada como casillas de verificación y botones de radio cuando no exista un atributo checked presente. Los campos de entrada como estos pueden existir sin la presencia de los estados checked o unchecked.

También selecciona elementos como progress que no cuenten con el atributo de contenido value (por ej. cuando se desconoce el porcentaje de cumplimentación). El soporte en navegadores es actualmente bastante estable en un amplio espectro de proveedores de navegadores.

5. :user-error

La pseudo-clase :user-error representa a un elemento de campo de entrada con datos introducidos erróneos, pero solo después de que el usuario haya interactuado con él. Por ejemplo, a partir del momento en el que el usuario haya intentado enviar el formulario y antes de que el usuario haya interactuado de nuevo con él.

Sin embargo, no está soportada aún por los navegadores y no hay manera de saber si será implementada por los principales. Por el momento es mejor usar :invalid o :required en caso de que precises un medio para aplicar estilo a tus formularios web.

6. :optional

La pseudo-clase :opcional puede usarse cuando el valor es válido y antes que el formulario al que pertenece sea enviado.

Selecciona cualquier elemento input o textarea que no tenga el atributo required presente. Esto permite a los formularios indicar fácilmente campos opcionales, y aplicarles estilo.

Este es uno de los selectores livianamente documentados que han sido incluídos en el borrador de la especificación de los selectores de nivel 4.

7. :scope

La pseudo-clase :scope puede limitar las reglas de estilo que solo se aplican a una parte de la página aplicando el atributo scoped en un elemento <style> (un hijo directo del elemento root de la subjerarquía a la que quieras aplicar los estilos). Esto limita los estilos de manera que solo afecten al elemento que es padre del elemento <style> y a todos sus descendientes, en otras palabras, al padre del elemento <style scoped> y a cualquier cosa contenida por éste.

Por desgracia, la mayoría de navegadores no dan soporte a esta pseudo-clase, o lo hicieron en algún momento pero lo han eliminado por completo. Aunque Chrome y Safari registran una correspondencia de la pseudo-clase, y por tanto aplican la regla CSS, todavía no admiten el ámbito de los estilos; esto significa que la aplicación de la regla CSS fluye más allá de la porción del documento que se pretendía y se iguala a :root.

Basándonos en una búsqueda actual, Chrome 35 y FF 55 eliminaron el soporte, aunque durante algún tiempo se lo daban. Todos estos pasos hacia atrás y hacia delante hacen que el panorama parezca un poco sombrío, y según Can I Use, actualmente la mayoría de los navegadores han levantado una bandera al soporte.

Conclusión

Ciertamente existen algunos selectores de nivel 4 muy prometedores y todavía muchos más que no hemos mencionado en este artículo. Como todo lo que viene en forma de especificación, algunos selectores podrían cambiar ligeramente a lo largo del tiempo o ser eliminados por completo. Depende de nosotros como desarrolladores adherirnos a aquellos que más valoramos y asegurarnos de que el equipo que esté a cargo del mantenimiento de nuestros sitios sea consciente de la situación. Si tienes cualquier duda o deseas realizar algún comentario, e incluso si dispones de ejemplos relacionados con los selectores que hemos explicado, por favor, publícalos en la sección de comentarios. ¡Que disfrutes mientras escribes tu código!

Especificationes

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.