更改伪类：在TD的javascript中的CSS之前

Question

I have a css class for td as follows:

td {
    text-align: left;
    padding: 3px;
    color:white;
    background-color:#E3F2ED ;
    position:relative; 
    z-index:10; 
    border:1px solid #74827D;
    border-style:solid none;

}

 td:before{
    content:""; 
    position:absolute; 
    z-index:-1; 
    top:2px; 
    left:2px; 
    right:2px; 
    bottom:2px; 
    background:#20936C;
} 

This makes the individual cells with color #20936C and a border of color #E3F2ED and last border of color #74827D .

Now I want to change the color of one cell when it is clicked. So basically I just want to change the :before color to let's say red.

Answer 1

I think you can just use JS to add or remove a "clicked" class to those elements, then add some CSS for that class:

 td.clicked:before{
    background:#FF0000;
 }

The cascading nature of CSS means the main styles of your td:before selector will be applied, then the td.clicked:before style will override the background .

So something like this:

 document.querySelector("table").addEventListener("click", function(e) { if (e.target.nodeName === "TD") e.target.classList.toggle("clicked") }) 

 td { text-align: left; padding: 3px; color:white; background-color:#E3F2ED ; position:relative; z-index:10; border:1px solid #74827D; border-style:solid none; } td:before{ content:""; position:absolute; z-index:-1; top:2px; left:2px; right:2px; bottom:2px; background:#20936C; } td.clicked:before{ background:#FF0000; } 

 <table> <tr><td>Click me</td></tr> <tr><td>Or me</td></tr> </table> 

Answer 2

Idea is to add the css

td.active:before {
  background: red;
}

and when clicked add the class active in the td

 $(function() { $('td').on('click', function() { $(this).toggleClass('active') }); }); 

 td { text-align: left; padding: 3px; color: white; background-color: #E3F2ED; position: relative; z-index: 10; border: 1px solid #74827D; border-style: solid none; } td:before { content: ""; position: absolute; z-index: -1; top: 2px; left: 2px; right: 2px; bottom: 2px; background: #20936C; } td.active:before { background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>This is an example</td> <td>This is an example</td> </tr> </table> 

Answer 3

The following toggles a "selected" class as other answers have, but I think it's better to use event delegation and put the listener on the table rather than every cell. Also, this solution uses plain JS, no additional library required.

Instead of using the tag name, you could add a "selectable" class to elements that are selectable and filter on that so it's not restricted to a particular tag name.

If you need support for browsers that don't support the classList property, that's not difficult. There are plenty of class add/remove/toggle utilities available.

 window.onload = function(){ document.getElementById('table0').addEventListener('click', toggleCell, false); } function toggleCell(e) { // Get the element that was clicked on var tgt = e.target; // If it was a TD, toggle the "selected" class if (tgt.tagName.toLowerCase() == 'td') { tgt.classList.toggle('selected'); } } 

 .selected { background-color: red; } td { padding: 10px;} 

 <table id="table0"> <tr><td>a<td>b<td>c <tr><td>a<td>b<td>c <tr><td>a<td>b<td>c </table>