Alejandra 7 de mayo de 2008 a las 12.42
   Imprimir artículo
elWebmaster.com

CSS: Selectores Calificados


Selectores Calificados CSS3Shaun 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:

a img { ... }

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…

{

    text-decoration: none;

    color: #A10;

    border-bottom: 1px dashed #A10;

}

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:

a < img { border: none; }

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:

{
    cursor: pointer;
}

¿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:

{
    cursor: default;
}

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í:

<ul class="archive">
    <li>
        <h3><a href="#archive-link">Headline/Event Title</a></h3>
        <div class="excerpt">
            <!-- extracto que puede contener elementos en niveles
de bloque y otros links -->
        </div>
    </li>
    <!-- and many more -->
</ul>

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:

ul.archive li < h3 a:visited
{
    opacity: 0.5;
}

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:

  1. “Separa” el primer selector de elemento individual (en este caso ul.archive).
  2. Guarda lo que queda del selector (li h3 a) en una variable remainder para usar después.
  3. Luego procede a seleccionar todo el ul en el parent y elimina lo que no tenga la clase archive.
  4. En una variable selected se guarda una referencia de cada ul que cumple con la función.
  5. Una vez que se procesaron todas las ul, la función parser() se llama a sí misma.
    La llamada recursiva muestra como argumentos a los remainder no-vacíos de nuestro selector original (argumento selector) y a los elemenetos selected (argumento parent).
  6. El resultado de la llamada recursiva reemplaza a los actuales elementos selected.
  7. Esto se repite hasta que ya no quede ningún remainder, cuando se devuelve el valor actual de selected (conteniendo únicamente a elementos).

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 selected hace un loop a través de los qualifiers, eliminando cualquier selected que no contenga uno de los qualifiers (chequeando cada árbol de ancestors qualifiers en busca de cada selected).
  • selected es devuelto, conteniendo sólo los elementos li que a su vez son contenidos por el archive ul que contiene al link visitado en h3.

Haz clic para visitar el sitio de Shaun Inman sobre Selectores Calificados.


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder