DT: Custom CSS is being overwritten by default [duplicate]

Question

I am trying to style the row highlight of my DT.

I'm adding custom css in ui.R using :

  table.DataTable tbody tr.selected td {
    background-color: aliceblue !important;
    color: white;
  }

This works as I can see it does in DevTools (pic below; bottom), but it gets overwritten by what I'm assuming is the default style for DT (pic below; top). This also works if I disable the default style (top) in DevTools, i.e. my (selected) rows will be aliceblue (#b0bed9) and not white.

How can I stop DT from overwritting custom css? Is this expected/desired behaviour?

Answer 1

The problem is the css Specificity. See https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Let's say you have the following css for example:

Div1, div2, div3 {
  background-color: blue;
}

That will be overwritten by

Parrent, Div1, div2, div3 {
  background-color: green;
}

But they will both be overwritten by

#div3 {
  background-color: red;
}

It all depends on the selector you use.

A element selector is 1. Class selector is 10. Id selector is 100.

Think of specificity as a score/rank that determines which style declaration are ultimately applied to an element.

But in regards to !important

Some rules of thumb: Always look for a way to use specificity before even considering !important Only use !important on page-specific CSS that overrides foreign CSS (from external libraries, like Bootstrap or normalize.css). Never use !important when you're writing a plugin/mashup. Never use !important on site-wide CSS.

Instead of using !important, consider: Make better use of the CSS cascade Use more specific rules. By indicating one or more elements before the element you're selecting, the rule becomes more specific and gets higher priority