Answers

• bindrid Posts: 730Questions: 0Answers: 119

  May 2017 Answer ✓

  !important will get you in trouble every time. Use it sparingly.

  The way I do it is load up the page then use dom explore in the console to see what classes are being applied. Then I write my css to work with those css styles.
  Below, I took there classes and added .older_generation, .middle_generation, and .young_generation ending up with what is shown below.

  It is more complicated but it is better behaved.

  http://live.datatables.net/tekikihe/1/edit

  /* for unselected rows */
  table.dataTable.stripe tbody tr.odd.older_generation, 
  table.dataTable.display tbody tr.odd.older_generation,
  table.dataTable tbody tr.older_generation{background-color:#F781F3 }
  
  table.dataTable.stripe tbody tr.odd.middle_generation, 
  table.dataTable.display tbody tr.odd.middle_generation,
  table.dataTable tbody tr.middle_generation{background-color:#A9F5E1 }
  
  table.dataTable.stripe tbody tr.odd.young_generation, 
  table.dataTable.display tbody tr.odd.young_generation,
  table.dataTable tbody tr.young_generation{background-color:#81BEF7 }
  
  
  /* For selected rows */
  table.dataTable.stripe tbody tr.odd.older_generation.selected, 
  table.dataTable.display tbody tr.odd.older_generation.selected,
  table.dataTable tbody tr.older_generation.selected{background-color:#a2aec7 }
  
  table.dataTable.stripe tbody tr.odd.middle_generation.selected, 
  table.dataTable.display tbody tr.odd.middle_generation.selected,
  table.dataTable tbody tr.middle_generation.selected{background-color:#a2aec7 }
  
  table.dataTable.stripe tbody tr.odd.young_generation.selected, 
  table.dataTable.display tbody tr.odd.young_generation.selected,
  table.dataTable tbody tr.young_generation.selected{background-color:#a2aec7 }
  
• galcott Posts: 53Questions: 15Answers: 1

  May 2017

  If I don't use !important then the highlighting doesn't happen at all.

  I'll try your solution but it does seem unnecessarily complicated.
• bindrid Posts: 730Questions: 0Answers: 119

  May 2017 Answer ✓

  If you want to stick with !important, do this (assuming #a2aec7 is your selected row color)

  .low_inv {
      background-color: #ffff33 !important;
  }
  
  .low_inv.selected {
      background-color: :#a2aec7 !important;
  }
  
• galcott Posts: 53Questions: 15Answers: 1

  May 2017

  That worked after I fixed your typo (the extra colon in front of the color code). A much simpler solution! Thanks.