JSFiddle - React, Tailwind, and code Playground

by houmie

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<div class="root">

    <div class="expand"><div>Orange</div></div>
    <div class="expand"><div class="override">Black</div></div>
    
</div>

<table class="cb_table-hover">
    <tbody>
        <tr><th>hover selector applies to this th</th></tr>
        <tr><th class="override_td">hover selector does NOT apply to this th</th></tr>
        <tr><td>hover selector applies to this td</td></tr>
        <tr><td class="override_td">hover selector does NOT apply to this td</td></tr>
    </tbody>
</table>

CSS

.expand div:not(.override) {
  color: orange;  
}

.cb_table-hover tbody tr:hover td:not(.override_td) ,
.cb_table-hover tbody tr:hover th:not(.override_td) {
  background-color: #cfe2e8;  
}

JavaScript

$(function() {
   
    $("div.expand").click(function() {
        //$(this).parent().hide();
        $(this).load('/echo/html/', {
            html: '<div class="override">New Black</div>'
        });
    });

    $("tr").click(function() {
        //$(this).parent().hide();
        $(this).load('/echo/html/', {
            html: '<td class="override_td">New Black</td>'
        });
    });

    
});