Siebel Open UI: Alternating Row Colours

With a huge hat tip to fellow Siebelite Duncan Ford, here is a quick solution to show rows in list applets with alternating colours. Like this:

Duncan has provided the following CSS rules which, when added to a custom style sheet, do the trick. Totally without any JavaScript coding.

.ui-jqgrid .ui-widget-content:nth-child(odd) {
    background: #e4bf66;
}
.ui-jqgrid .ui-widget-content:nth-child(even) {
    background: #f9e6b7;
}
tr.ui-state-highlight {
    background:rgba(0, 0, 0, 0.2) !important;
}
.ui-jqgrid .ui-state-highlight, .ui-jqgrid .ui-widget-content .ui-state-highlight, .ui-jqgrid .ui-widget-header .ui-state-highlight {
    background:initial;
}

As you can see, CSS can distinguish odd and even children of a selection. I have seen quite a lot of jQuery code which accomplishes the same (and of course allows for a more dynamic colouring). But you can't deny the purity and simplicity of CSS.

Many thanks to Duncan for sharing this.

have a nice day

@lex