Bootstrap - Customise Table Row Highlight Class for One Page - html

Question

I have a Bootstrap table that allows users to select rows which adds the class="success" to the select Row. I'm using the defaults for the contextual classes:
https://getbootstrap.com/docs/3.3/css/#tables-contextual-classes
but the customer would like, just for this particular page, to have the success be a more brighter green that stands out more.
Here's an example of the table:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Serial #</th>
<th scope="col">Product Code</th>
<th scope="col">ID</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="success" id="PZs456">
<td>ZK2342MFM</td>
<td>JMPG</td>
<td>98651217</td>
<td>Keyboard - Bluetooth</td>
<td class="text-center">
<button type="button" class="btn btn-success btn-sm">Select</button>
</td>
</tr>
</tbody>
</table>
What's the best way to change the 'success' colour so it's a brighter green just for this page without changing the Bootstrap CSS itself?

Answer 1

.new-green {
background: #00ff00 !important;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Serial #</th>
<th scope="col">Product Code</th>
<th scope="col">ID</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="success" id="PZs456">
<td>ZK2342MFM</td>
<td>JMPG</td>
<td>98651217</td>
<td>Keyboard - Bluetooth</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm new-green">Select</button></td>
</tr>
</tbody>
</table>
I do not know if this is a best way but since there are a lot of !important things in bootstrap why dont you use your own as new class?