I need to style a
td
tr.transferred td[class^="sorting_"],
tr.transferred td[class*=" sorting_"] {
background-color: rgba(153, 204, 255, 0) !important;
}
!important
td
sorting_*
g-*
<table class="display cell-border nowrap" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>Police Officer</td>
<td class="g-green">Active</td>
</tr>
<tr class="transferred">
<td>2</td>
<td>Jane Smith</td>
<td>Accountant</td>
<td class="g-green">Active</td>
</tr>
<tr>
<td>3</td>
<td>Nicole Curtis</td>
<td>Manager</td>
<td class="g-red">Retired</td>
</tr>
</tbody>
</table>
$(document).ready(function() {
$("table").DataTable({
"paging": false,
"bPaginate": false,
"bFilter": false,
"bInfo": false
});
});
tr.transferred {
background-color: rgba(153, 204, 255, 0.30) !important;
}
tr.transferred td[class^="sorting_"],
tr.transferred td[class*=" sorting_"] {
background-color: rgba(153, 204, 255, 0) !important;
}
.g-yellow { background-color: rgba(226, 222, 112, 0.6) !important; }
.g-green { background-color: rgba(112, 226, 112, 0.6) !important; }
.g-pink { background-color: rgba(226, 112, 196, 0.6) !important; }
.g-red { background-color: rgba(226, 112, 112, 0.6) !important; }
.g-blue { background-color: rgba(112, 163, 226, 0.6) !important; }
Status
The :not()
selector like so.
[class*="sorting_"]:not([class*="g-"]) {
/* your styles here */
}
.sorting_ {
width: 75px;
height: 75px;
border: 1px solid grey;
display: inline-block;
margin: 1em;
}
[class*="sorting_"]:not([class*="g-"]) {
background: red;
}
.g-green {
background: green;
}
.g-pink {
background: pink;
}
.g-blue {
background: blue;
}
<div class="sorting_ g-green"></div>
<div class="sorting_ g-pink"></div>
<div class="sorting_ g-blue"></div>
<div class="sorting_ grey"></div>
Works in Chrome/FF/IE11