All CSS working in Sencha Touch 2 list except for one property

Question

My list loads data, works fine and all CSS is being applied to each Cls except for the font color in the SelectedCls where I have the .ListSelected class.

The text should be white when selected state.

    .ListNormal {
        background: #f7f7f7;
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        color: #024059 !important;
        text-shadow: 0px 0px 0px #000000;
    }

    .ListPressed {
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        color: #024059 !important;
        font-weight: bold;
        text-shadow: 0px 0px 0px #000000;
        -webkit-box-shadow: inset 0px 1px 0px #ffffff;
        background: #b6e1ff;
    }

    .ListSelected {
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        color: #ffffff !important;
        font-weight: bold;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#1ca1ff), to(#0081dc));
        -webkit-box-shadow: inset 0px 1px 0px #b1dfff;
    }

Answer 1

When you use !important, the first property takes precedence over other properties with !important farther down in the sheet. The opposite is the case on properties where !important is not used (last takes precedence). One of your other classes is taking precedence over your selected class.