Bill Tudor Bill Tudor - 1 year ago 106
CSS Question

Change link styling in dataTables

I've found the following CSS class handles highlighting an active row in dataTables.

.table > thead > tr >,
.table > tbody > tr >,
.table > tfoot > tr >,
.table > thead > tr >,
.table > tbody > tr >,
.table > tfoot > tr >,
.table > thead > > td,
.table > tbody > > td,
.table > tfoot > > td,
.table > thead > > th,
.table > tbody > > th,
.table > tfoot > > th {
background-color: #337ab7;


Producing a result like this:

enter image description here

The far left column is a link, and one can see how this interferes with my link styling. Currently links are the default blue, I'd like to change it to white. Is it possible to style my links directly in this class?

Answer Source

You need to create a selector that has greater or equal specificity (equal if you reference your CSS file below datatables.css in your page). A nice tool that you can use is this CSS specificity calculator.

I'm not sure why you want to change your link from blue to white, since it's on a very light background and will be hard to see. But this will do that:

.table > tbody > > td > a {color: white}

Now, one thing that you can not do is select a td element based on the fact that it contains a link. There's no way in CSS to select a container based on its contents. You'd have to add a class to the container and select it that way.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download