Para entender este problema del Internet Explorer 6 (y versiones anteriores) podemos imaginarnos un menú de navegación como el siguiente:
<ul id="navlist"> <li><a id="current" class="i1" href="#">Item one</a></li> <li><a class="i2" href="#">Item two</a></li> <li><a class="i3" href="#">Item three</a></li> </ul>
Lo correcto (sobre todo en términos semánticos) es indicar el atributo id="current" para el enlace que se corresponda a la página activa.
Acceder a este elemento por CSS y poner el enlace en azul sería fácil usando el selector de id:
#current { color: blue; }Hasta aquí ningún problema, todo sencillo, pero resulta que queremos actuar de forma diferente en cada elemento activo. Por ejemplo poner un color diferente dependiendo de la página activa.
Para esto podemos apoyarnos en las clases de cada elemento creando un selector que combine el ID #current y cada clase .i1, .i2, i3.
#current.i1 { color: blue; }
#current.i2 { color: pink; }
#current.i3 { color: red; }
Todo funciona perfecto… MENOS EN IE 6! (que no lleva nada bien las combinaciones).
Para solucionar esto llevo años usando una técnica que al mismo tiempo mejora el código XHTML.
Se trata de marcar con un ID el elemento que contiene la sección activa id="active".
<ul id="navlist"> <li id="active"><a id="current" class="i1" href="#">>Item one</a></li> <li><a class="i2" href="#">Item two</a></li> <li><a class="i3" href="#">Item three</a></li> </ul>
Y ahora por CSS en vez de combinar ID y clase en un mismo selector, podemos usar el selector #active y cada clase (cascada):
#active .i1 { color: blue; }
#active .i2 { color: pink; }
#active .i3 { color: red; }
El resultado es válido en todos los navegadores y aportamos más semántica al contenido web.
