Shaun Inman tuvo una gran idea para una presentación en los Grupos de Trabajo de CSS3 a la que ha llamado “Selectores Calificados”. En resumen, es una forma de incorporar estilos a un elemento “padre” basándose en su “hijo”, o “descendiente”.
Aún no se ha lanzado oficialmente porque el autor espera recibir un poco de feedback para depurar y eliminar errores… Pero veamos cuál es la explicación que nos da y cómo funciona.
Empecemos con lo siguiente:
|
Este estilo se aplica a cualquier imagen dentro de cualquier elemento de ancla. ¿Pero qué sucede si nosotros ya hemos definido un estilo de ancla…
|
pero no queremos que este estilo de aplique a nuestros links de imágenes? Actualmente deberÃamos agregar una nueva clase a cada uno de nuestros links de imágenes, como para deshabilitar el estilo no deseado (en este ejemplo el border-bottom).
Qué pasarÃa si pudiéramos simplemente escribir:
|
Bueno, eso es selector calificado. Un selector calificado puede contener solamente un <. El elemento que está a la izquierda del < es el target del selector, mientras que todo lo que está a la derecha es el calificador. En este caso el estilo sólo puede aplicarse a anclas que contengan una imagen.
Aquà hay otro ejemplo: como la mayorÃa de los navegadores permiten hacer clic sobre una etiqueta para chequear la checkbox correspondiente podemos simular este comportamiento cambiando el estilo del cursor:
|
¿Pero si el contenedor del checkbox está deshabilitado? El puntero del cursor quedarÃa medio despistado (porque la etiqueta del checkbox no puede deschequearse ;p). Actualmente necesitarÃamos agregar una clase a la etiqueta en forma manual (or deshabilitar un elemento parent adicional arbitrariamente) para corregir esto. Con los Selectores Calificados (combinados con selectores de atributos) podrÃamos simplemente escribir:
|
Un último ejemplo: digamos que nuestro sitio tiene noticias, blog un archivo de eventos. El archivo es un listado de items que contienen un link y un extracto del artÃculo completo o el detalle del evento. Se verÃa algo asÃ:
|
Ahora supongamos que queremos diferenciar a todos los items visitados anteriormente (en vez de los únicamente los links que has visitado anteriormente). Actualmente no se puede hacer (sin tener muchos conocimientos de programación). Con los selectores calificados es muy fácil:
|
Como puedes ver en el código de arriba, ambos lados del < pueden contener selectores complejos. Otra vez, todo lo que está antes del < corresponde al target y todo lo que está después corresponde al elemento calificado (en el caso de arriba, es un link visitado en un h3 en nuestra etiqueta del listado de items en un listado desordenado de archive). Si el link en el h3 no ha sido visitado, el li aparece en el default, con opacidad al 100% (full opacity). Asimismo, incluso cuando un link que está en el extracto del artÃculo es visitado, el li seguirá apareciendo con full opacity.
¿Cómo se puede implementar?
Según Shaun Inman, los cambios requeridos para este tipo de selectore son mÃnimos. La mayorÃa de los parsers de CSS trabajan de arriba hacia abajo con cada paso sucesivo andentrándose cada vez hacia los selectores descendientes reemplazando el elemento ancestor seleccionado anteriormente hasta que haya seleccionado todos los targets. Con los selectores calificados en vez de que los descendientes subsecuentes reemplacen a los elementos anteriores, los descendientes serán usados para eliminar los elementos ancestors que no quieras.
Digamos que tenemos una función de parser () recursivo que tiene dos argumentos: un string selector y el node(s) parent (si no hay un parent toma como default al root del elemento html). Llamemos al parser('ul.archive li h3 a') para ver cómo funciona.
Como no se ha dado un segundo argumento el parser asume el elemento root del html es el parent. Entonces:
- “Separa” el primer selector de elemento individual (en este caso
ul.archive). - Guarda lo que queda del selector (
li h3 a) en una variableremainderpara usar después. - Luego procede a seleccionar todo el
ulen elparenty elimina lo que no tenga la clasearchive. - En una variable
selectedse guarda una referencia de cadaulque cumple con la función. - Una vez que se procesaron todas las
ul, la funciónparser()se llama a sà misma.
La llamada recursiva muestra como argumentos a losremainderno-vacÃos de nuestroselectororiginal (argumentoselector) y a los elemenetosselected(argumentoparent). - El resultado de la llamada recursiva reemplaza a los actuales elementos
selected. - Esto se repite hasta que ya no quede ningún
remainder, cuando se devuelve el valor actual deselected(conteniendo únicamenteaelementos).
Los selectores calificados pueden requerir que modifiques la lógica en las llamadas recursivas. Llamamemos a parser('ul.archive li < h3 a:visited') para ver los cambios. La función procede como lo acabamos de explicar hasta que el remainder sea igual a < a:visited. Cuando el remainder empieza con < significa que los elementos selected actualmente son nuestros targets y que cualquiera de los elementos que no contengan a los elementos seleccionados por el remainder deben ser eliminados. En vez de reemplazar el selected con el resultado de la llamada recursiva tal como hicimos anteriormente, ahora el resultado se guarda en la variable qualifiers.
Entonces:
- Por cada
selectedhace un loop a través de losqualifiers, eliminando cualquierselectedque no contenga uno de losqualifiers(chequeando cada árbol de ancestorsqualifiersen busca de cadaselected). selectedes devuelto, conteniendo sólo los elementoslique a su vez son contenidos por elarchive ulque contiene al link visitado enh3.
Haz clic para visitar el sitio de Shaun Inman sobre Selectores Calificados.
