CODEWITHSUNDEEP
jquerycssdatatables
Bill Tudor
Bill Tudor

Reputation: 109

Change link styling in dataTables

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

.table > thead > tr > td.active,
.table > tbody > tr > td.active,
.table > tfoot > tr > td.active,
.table > thead > tr > th.active,
.table > tbody > tr > th.active,
.table > tfoot > tr > th.active,
.table > thead > tr.active > td,
.table > tbody > tr.active > td,
.table > tfoot > tr.active > td,
.table > thead > tr.active > th,
.table > tbody > tr.active > th,
.table > tfoot > tr.active > 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?

Bob Rhodes produced the correct answer resulting in this.

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

enter image description here

Thanks again.

Upvotes: 0

Views: 1595

Answers (2)

MohammadReza Mahmoudi
MohammadReza Mahmoudi

Reputation: 1324

Use this code :

.table > tbody > tr.active a{color: #fff;}

Upvotes: 0

BobRodes
BobRodes

Reputation: 6165

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 > tr.active > 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.

Upvotes: 1

Related Questions