CODEWITHSUNDEEP
csscss-selectors
dokgu
dokgu

Reputation: 6040

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.

Upvotes: 0

Views: 51

Answers (1)

Paulie_D
Paulie_D

Reputation: 115066

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

Upvotes: 1

Related Questions