jquery mobile listview applying the list item background color

Question

As I shifted to the new jquery 1.4 , I am no longer able to change the background color of the listitem

I want to give some different color to even odd list items.

Answer 1

Here is a DEMO

This CSS rule finds all odd LI tags that do not have the class ui-li-divider and all anchor tags contained in them and changes the background-color . This handles lists with links or without links. However, dividers mess up the odd even count, so this is not a great solution in that case (see third ul in the fiddle).

li:nth-child(odd):not(.ui-li-divider), li:nth-child(odd):not(.ui-li-divider) a {
    background: #777 !important;
    text-shadow: none;
}
li:nth-child(odd):not(.ui-li-divider) a:hover {
    background: #999 !important;
    text-shadow: none;
}

The second rule allows you to have a hover effect on the odd LI anchor tags.

Answer 2

Here is your solution

Use !important

.odd{
    background:red !important;
}
.even{
    background:black !important;
}

Or you should edit and remove background property from jquery.mobile-1.4.0.min.css

.ui-body-a,.ui-page-theme-a .ui-body-inherit,html .ui-bar-a .ui-body-inherit,html .ui-body-a .ui-body-inherit,html body .ui-group-theme-a .ui-body-inherit,html .ui-panel-page-container-a{**background:#FFF;**border-color:#ddd;color:#333;text-shadow:0 1px 0 #f3f3f3}

Fiddle http://jsfiddle.net/krunalp1993/r5Heb/3/

Hope it works :)