Sencha Touch: selected list styling doesn't work

Question

It's probably very simple question, but for some reason I can't find a problem in my code. I have a Sencha Touch app. I define a itemCls in particular list class definition:

xtype: 'list',
store: 'Tenders',
itemCls: 'tenders',
onItemDisclosure: false,
itemTpl: [
    '<div class="name">{name}</div>',
            '<div class="description">{description}</div>'
].join(''),

And then I have some custom CSS definition where I'm trying to customize this particular list (not all lists in the application):

.tenders {
    padding: 0.7em 0.7em;
}

.tenders .name {
    padding: 0em 1.5em 0em 0em;
    font-size: large;
    font-weight: bold;
}

.tenders .description {
    font-size: small;
    font-weight: light;
    padding: 0em 0em 0em 0em;
}

.tenders .x-item-selected {
    background-color: green;
}

However selected item is not green. I can see in Chrome debugger the following classes attached to the selected item in the list:

<div class="x-list-item-first x-list-header-wrap x-list-item x-stretched x-list-item-tpl tenders x-list-item-relative x-item-selected" id="ext-simplelistitem-211" style="min-height: 50px !important;">
  <div class="x-unsized x-list-disclosure x-item-hidden" id="ext-component-436" style="display: none !important;"></div>
  <div class="x-innerhtml" id="ext-element-563">
    <div class="name">Name</div>
    <div class="description">Description</div>
  </div>
</div>

I also can see that .tenders { padding: 0.7em 0.7em } style is being applied, but not the .tenders .x-item-selected .

Any idea what am I doing wrong?

Answer 1

use:

.tenders.x-item-selected {
    background-color: green;
}

to make your code more important that standard Sencha css either use the full path

.tenders.x-list-item.x-item-selected.x-list-item-tpl

or

background-color:green!important;

Do not add a space between tenders and x-item-seleced as they are on the same level, while name and description are inside the tenders div