PDA

View Full Version : Change list style only for the first item in the list



ardiwine
20 Nov 2011, 2:26 PM
Hi,
I'm wondering if it is possible for the first list item to have a different CSS style and the rest of the items in the list to have another CSS style.

Thanks.

mitchellsimoens
21 Nov 2011, 9:48 AM
Definitely is possible! You can use the pseudo CSS selector el:first-child (reference (http://www.w3.org/TR/CSS2/selector.html)) which is optimal or you can check to see what the index is in your XTemplate:


new Ext.XTemplate(
'<tpl for=".">',
'<div class="someCSS {[xindex === 0 ? \"firstChild\" : \"\"]}"></div>',
'</tpl>'
);

So there it checks to see if the xindex is the first (zero) and then adds the firstChild CSS rule.

ardiwine
25 Nov 2011, 6:42 AM
Thanks, it works!

AndreaCammarata
25 Nov 2011, 6:49 AM
The better way do do this would be directly by using SASS or CSS:
First give to your list a "cls" config (i.e. myList) and then from your app theme css you should write



.myCls {
.x-list-item {
&:first-child {
color: Red;
}
}
}


This will give to all your list first item a red foreground color, but only to those list that have the same "myList" configuration param.
In this way you don't have to edit the template of all the list you need to have the same style.

Hope this helps.

mitchellsimoens
25 Nov 2011, 10:10 AM
What I said, second sentence:


Definitely is possible! You can use the pseudo CSS selector el:first-child (reference (http://www.w3.org/TR/CSS2/selector.html)) which is optimal or you can check to see what the index is in your XTemplate:


new Ext.XTemplate(
'<tpl for=".">',
'<div class="someCSS {[xindex === 0 ? \"firstChild\" : \"\"]}"></div>',
'</tpl>'
);

So there it checks to see if the xindex is the first (zero) and then adds the firstChild CSS rule.