I'm trying to theme some buttons according to their ancestors (not parents, especialy), so... I have the following HTML structure

  

    

      

        Button B1
        Button B2
      
      

        Button B3
        Button B4
      
    
    

      

        Button A1
        Button A2
      
      

        Button A3
        Button A4
      
    
  

Well, as you can see, there are two themes .theme-a and .theme-b

The CSS code, looks like:

.theme-a {
  background: #999;
}
.theme-b {
  background: #555;
}
.theme-a button {
  background: #222;
}
.theme-b button {
  background: #69C;
}

The problem is: if you switch the theme classes (A with B and B with A), you'll notice that the button on A theme (which has a closer ancestor with the theme class, keeps the styling of the far ancestor, the blue background rather than black one).

How can I achieve a proper specificity in a way that the button properties are set according to the closest ancestor?

Here's the link from JSfiddle: http://jsfiddle.net/XVaQT/1/

I hope that I explained in a clear way :)

Thanks ​