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.

@Nick, eurgh, what a horrible solution they proposed.. dynamically inserting style elements when things are clicked.. that just sounds mental! — haxxxton
– haxxxton, Commented Feb 24, 2017 at 1:49
@haxxxtonI wanted to show what you can't access the pseudoclass in JS. — Nick
– Nick, Commented Feb 24, 2017 at 1:57

nnnnnn · Accepted Answer · 2017-02-24 02:22:10Z

3

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>

edited Feb 24, 2017 at 2:22

answered Feb 24, 2017 at 1:48

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nnnnnn Over a year ago

@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.

Tamil Selvan C · Accepted Answer · 2017-02-24 01:49:57Z

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>

RobG · Accepted Answer · 2017-02-24 02:50:53Z

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>

Collectives™ on Stack Overflow

changing pseudo class :before css in javascript for TD

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related