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

Question

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.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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

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

HTML

Jquery

CSS

What My Problem Is

Sign up