GWT StackPanel Selected

Question

I cannot seem to set the CSS of the selected stack panel without having it get overwritten by the unselected CSS. If I leave the unselected alone, the selected stack panel will correctly overwrite, but if I define my own, it will not. Is this a bug, or some "working as intended" thing?

Here I set my CSS:

.gwt-StackPanel .gwt-StackPanelItem-selected {
        background: url('images/toggle-o.gif');

}

.gwt-StackPanel .gwt-StackPanelItem {
        font-weight: bold;
        font-size: 8pt;
        width: 400px;
        /*background: url('images/toggle-c.gif');*/
        background-color: #EEE;
        background-position: top right;
        background-repeat: no-repeat;

}

Unfortunately, my selected panel is overwritten by the first panel's CSS somehow. Any help? Is this a bug? If I leave the ".gwt- StackPanel .gwt-StackPanelItem" alone, it uses the GWT css and then will inherit my selected CSS correctly, but only then.

Answer 1

My problem was the order of the CSS. Both of them have the same weight, so the last one takes precedence. Reversed the order, problem solved.