IE6 nie wspiera konstrukcji:

[HTML] pobierz, plaintext 
<span class="foo"></span>
<span class="foo bar"></span>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
.foo.bar
[CSS] pobierz, plaintext 

Jest jakiś sprytny hack na to czy jedyną opcją jest kolejny węzeł DOM?

Ano nie wspiera.

Kilka pomysłów:
1. Stylowanie elementów o klasie .bar, potem ewentualne nadpisywanie dla elementów o klasie foo

[CSS] pobierz, plaintext 
span.bar { color:red; border:1px solid #fff }
span.foo { border:1px solid #bbb }
[CSS] pobierz, plaintext 

2. http://code.google.com/p/ie7-js/

To nie wygląda jak kod, który odpowiada za to by strona w ogóle miała ręce i nogi... tak więc daruj sobie IE6, albo podaj konkretny powód dla którego chciałbyś go wspierać.

W tym przypadku nie da się tak zrobić...


Bardzo ważna jest dla nas szybkość jak i liczba ładowanych plików, a więc odpada.


Tak, tak, IE6 umarło ale w targecie aplikacji istnieje 3% userów którzy posiadają tą przeglądarkę co tworzy kilkadziesiąt tys. potencjalnych użytkowników, a dostosowanie aplikacji dla IE6 nie wymaga dużo zachodu a więc to robimy.

A więc robię to tak:

[HTML] pobierz, plaintext 
<span class="foo"></span>
<span class="foo">
   <span class="bar"></span>
</span>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
.foo .bar {}
[CSS] pobierz, plaintext