With jQuery, how to remove the nth-of-type pseudo selector that is applied-CodePudding

I have this css:

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #595049;
}
.simple {
    background-color: #3535f866;
}

Once the whole HTMLL page is drawn, I get some Json, and create a table, then for each row, I call this function:

var cbCreatedRow = function( row, data, dataIndex){
    if (data.hasOwnProperty('x') && !data.x) {
        $(row).addClass('simple');
    }
};

However, the first one "overrides" the simple class simple and I don't to want to smash it with the !important dirty solution. Note: I've already read this but there's no solution.

Is there a way to remove, with jQuery, a pseudo class selector that is applied?

CodePudding user response：

There's no need for jquery, this is a css solution / issue.

Your problem is due to specificity - in css, an entry with more rules has higher priority over one with fewer rules.

So .table-striped>tbody>tr:nth-of-type(odd) has more rules that .simple so takes priority and you don't get the "simple" background rule.

The solution is to add the same rules to your .simple css entry:

.table-striped>tbody>tr:nth-of-type(odd).simple,
.simple {
    ...

Sample snippet:

$("button").click(() => {

  $("table tr").eq(0).addClass("simple");
  $("table tr").eq(1).addClass("simple");

});

.table-striped>tbody>tr:nth-of-type(odd) {
  background-color: #595049;
}

.table-striped>tbody>tr:nth-of-type(odd).simple,
.simple {
  background-color: #3535f866;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class='table-striped'>
  <tbody>
    <tr>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
    </tr>
    <tr>
      <td>Row 3</td>
    </tr>
    <tr>
      <td>Row 4</td>
    </tr>
  </tbody>
</table>

<button>click me</button>