Patrick Gregorio Patrick Gregorio - 4 months ago 10
CSS Question

CSS style only if one class isn't combined with another

I need to style a

td
a certain way only if a class isn't combined with another class.

I'm doing something like this:

tr.transferred td[class^="sorting_"],
tr.transferred td[class*=" sorting_"] {
background-color: rgba(153, 204, 255, 0) !important;
}


As much as I hate using
!important
I need them there so please bear with my code a little bit.

I need my selector to be updated such that it only applies the style if and only if the
td
has a class of
sorting_*
that is not combined with a class of
g-*
.

If you need any more info, let me know.

EDIT: (additional info)

Here's a Fiddle so you can try and see what my problem is.

HTML



<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>


Jquery



$(document).ready(function() {
$("table").DataTable({
"paging": false,
"bPaginate": false,
"bFilter": false,
"bInfo": false
});
});


CSS



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; }


What My Problem Is



So if you look at my fiddle and play around with sorting, the colors work great except if you sort by the
Status
column. It should retain it's color green sorted or not.

Answer

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

Comments