override primefaces theme - datatable with multiple colored rows

Question

How to override theme css? I have problem to override css on the datatable level (.ui-datatable, ..), therefore theme css. I override css on the theme level with:

            .ui-widget,  .ui-widget {
                font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
                font-size: 12px;
            } 
            .ui-widget-content {
                color: #000;
                padding: 3px;
                text-align: left;
                border: 1px #4682B4 solid;

            }

But I need colored lines according of values in table rows... (rowStyleClass="#{id.rowStyleRide}") I try write class, but it doesnt work.. it seems i dont have access to row css

    .oddRow .ui-datatable-odd{
     background-color: white; 
    }
    .evenRow .ui-datatable-even{
     background-color: black ; 
    }
    .lightGgreenRow .ui-datatable-odd,.ui-datatable-even{
     background-color: green;
    }
   .lightRedRow .ui-datatable-odd,.ui-datatable-even {
     background-color: red;
   }
  .lightYellowRow .ui-datatable-odd,.ui-datatable-even {
     background-color: yellow;
  }

Anyone try to do something like this? Thanks for any ideas

Answer 1

The phrasing of your question is a little unclear: I'm assuming you mean the first set of CSS is yours and the second is the existing CSS?

In that case, the problem is being caused by the !important. !important causes that CSS rule to override any CSS rule that comes before or after it.

The only way to override CSS with !important is to put your CSS after it, also marked with !important.

http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/