changing pseudo class :before css in javascript for TD

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.

Check it. http://stackoverflow.com/questions/10061414/changing-width-property-of-a-before-css-selector-using-jquery — Nick, Feb 24 '17 at 01:47
@Nick, eurgh, what a horrible solution they proposed.. dynamically inserting style elements when things are clicked.. that just sounds mental! — haxxxton, Feb 24 '17 at 01:49
@haxxxtonI wanted to show what you can't access the pseudoclass in JS. — Nick, Feb 24 '17 at 01:57

nnnnnn · Answer 1 · 2017-02-24T02:22:10.103

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>

@RobG - Good point. Guess I was focused on the CSS part of the question and just wanted a quick way to add a click handler. I've updated the answer to use plain JS. — nnnnnn, Feb 24 '17 at 02:22

score 0 · Accepted Answer · answered Feb 24 '17 at 01:49

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>

score 0 · Answer 3 · answered Feb 24 '17 at 02:50

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>

changing pseudo class :before css in javascript for TD

3 Answers3