Ir directamente al contenido de esta página

El «selector de ancestros», uno que echo de menos en la especificación de CSS3

En la sintaxis de CSS, los selectores se pueden ir concretando en el orden descendente del DOM. En mi humilde opinión, el módulo de selectores de nivel 3 debería incluir una sintaxis que permitiera apuntar a un elemento de manera ascendente. En algunos casos, como el del ejemplo que presento, sería una mejora para la accesibilidad de una página.

Como es bien sabido, por medio de una lista de selectores se puede ir profundizando en el árbol del DOM y definir un subconjunto de elementos de un documento para aplicarle un estilo. Así, sobre este marcado:


<div>
  <p><strong>Lorem <a href="ipsum.htm">ipsum</a></strong> dolor</p> 
</div>
	

se podría apuntar al vínculo por medio de un conjunto de selectores div p strong a. Como he apuntado en la introducción, ésta es una selección «descendente» en el árbol. Personalmente, en algunas ocasiones echo de menos un selector que, por ejemplo, me permitiera apuntar a p desde a de forma inversa.

Una aplicación práctica

Podría parecer innecesario una sintaxis que permitiera ascender desde un elemento para seleccionar alguno de sus ancestros, puesto que puedo declarar un conjunto de selectores que apunten directamente al mismo —en el ejemplo anterior, un simple div p—. No obstante, al trabajar con pseudo-clases —concretamente con :focus— se hace patente su necesidad.

Para ilustrar esta afirmación, voy a recurrir al ejemplo de un caso muy común, un menú de navegación con subniveles desplegables.

El típico menú desplegable.

Desde el momento en que :hover se puede asignar a cualquier elemento, se puede lograr esta funcionalidad sin depender de JavaScript. Sin embargo, desde el punto de vista de la accesibilidad, esta interfaz crea un pozo de vínculos para un usuario que emplee para navegar el teclado. Puesto que no puedo asignar un :focus al elemento ul que contiene los vínculos de la subnavegación, el submenú no se despliega y el usuario no tiene ningún indicio —salvo la barra de estatus del navegador— de que esté avanzando por la lista de vínculos. He aquí un ejemplo.

¿Cómo se podría solucionar? Bueno, se podría hacer algo así:


li ul li a:focus<li<ul{
  /* Estilos necesarios para hacer visible el submenú */
}
	

Con el signo < se podría definir que una vez alcanzado el elemento que recibe el foco, habría que ascender de nuevo por el árbol hasta un ancestro. Incluso pienso que se podría simplificar así:


li ul<li<a:focus{
  /* Estilos necesarios para hacer visible el submenú */
}
	

De esta manera, cuando el usuario alcanzase el vínculo a través del teclado, se podría modificar el estilo del elemento que se tiene que desplegar.

En estos momento el módulo de selectores ya es una Propuesta para Recomendación, así que es difícil que se implementen cambios importantes. No obstante, si se da la oportunidad de un futuro módulo de nivel 4, propondremos el selector al grupo de trabajo de CSS.

Nota adicional [22/03/2010]: Hace unos días me llegó un correo de un buen amigo diciéndome que la idea era buena, pero que Shaun Inman ya se me había adelantado, y que la concepción y sintaxis de sus qualified selectors tienen ya casi dos años. No obstante, he de decir que ha sido un honor para mi coincidir con una figura tan respetada como él.

Esta entrada se publicó el 19 de febrero de 2010, se archivó en , y fue etiquetada como . Autor: Saúl González Fernández. Hay 3 comentarios ›.

Comentarios

  1. Elías dice:

    También me serviría en este momento…

  2. jorge dice:

    Precisamente andaba buscando eso 🙁

    Seria útil también para hacer cosas como ventanas modales que puedan cerrarse desde (por ejemplo) un enlace interno.

  3. Saúl González Fernández dice:

    @jorge: Bueno, parece que en un futuro lo tendremos a nuestra disposición 🙂

    En el boceto de selectores de nivel 4 se ha incluido el concepto de un selector de padres, aunque la sintaxis no está definida. En la versión del 29 de septiembre de 2011 el selector tenía la forma $E > F, y en la versión del 23 de agosto de este mismo año, E! > F. En ninguno de los dos bocetos está desarrollado, pero es un comienzo…

¿Algún comentario?

* Los campos con un asterisco son necesarios

Últimos proyectos

© Digital Icon, S.L., 2007 – 2017