pseudo element control with javascript

Question

I'm trying to make a talkbubble styled div- box change colors completely upon being clicked.

I ran into a problem of getting the :before pseudo element that I'm using (to shape the arrow for the talkbubble) to actually change colors with the rest of the element, as seen here:

HTML

<div class="clickables">
        <div class="talkbubble">
            <input type="hidden" class="tbselector" value="sbselection_1">
            <div class="thumbnail">
               <img src="images/thumbnail1.png" height="33" width="30" />
             </div>
             <div class="words">Commons</div>
         </div>
         <div class="talkbubble">
             <input type="hidden" class="tbselector" value="sbselection_2">
             <div class="thumbnail">
                 <img src="images/thumbnail1.png" height="33" width="30" align="middle" />
             </div>
             <div class="words">crossroads</div>
         </div>
         .
         . More and more
         .
    </div>
</div>

CSS ^{Just Relevant}

.talkbubble {
   background: white;
   color: rgb(0,0,0);
   height: 40px;
   margin-top: 1%;
   margin-left: 48%;
   margin-right: auto;
   position: relative;
   width: 150px;    
 }
.talkbubble:before {
   border-top: 10px solid transparent; 
   border-right: 10px solid white; 
   border-bottom: 10px solid transparent; 
   content:""; 
   height: 0; 
   position: absolute; 
   right: 100%; 
   top: 10px; 
   width: 0;    
}
.talkbubble:before.clicked {
   border-right-color:#666666;
}
.talkbubble:hover{
    background-color: rgb(194,194,194)!important;
    color:rgb(255,255,255);
}
.talkbubble:hover:before{
   border-right-color: rgb(194,194,194)!important;
}

JQUERY

$('.clickables').on('click','.talkbubble',function () {
     $(this).parent().find('.talkbubble').css('background-color','#ffffff');
     $(this).css('background-color', '#666666');
 });

Here is a Demo http://jsfiddle.net/petiteco24601/3xuuq2fx/

I did some research and it seems a little inconclusive. For the most part, a lot of what I found was basically saying that there's no way to really force javascript on a pseudo element, since the pseudo element doesn't REALLY exist.

However, with more research, I found things like http://css-tricks.com/pseudo-element-animationstransitions-bug-fixed-in-webkit/ and Change an HTML5 input's placeholder color with CSS that say that those bugs were fixed and it is possible with some browsers to use javascript on pseudo elements. What's the actual deal? How extensively can a person control pseudo elements?

Answer 1

The way you can go is add or remove a new class.

• First remove the !important declaration on your CSS is bad practice and can be conflictive later.

• Then make a new class with the change you want :

  .clicked {
      background:#666;
  }
  .clicked:before {
      border-right-color:#666;
  }
  

• Then with Jquery add / remove the class:

  $('.clickables').on('click','.talkbubble',function () {
      $(this).siblings('.talkbubble').removeClass('clicked');
      $(this).addClass('clicked');
  });
  

Check this DemoFiddle

Answer 2

If you are looking for only CSS solution without using javascript. Here it is:

Working Fiddle

I wrapped each list-item block with a label and radio button in HTML code. and in CSS, I added the following code:

.talkbubble {
    display: inline-block;
    /* other styles */
}

:checked + .talkbubble {
    background-color: #666;
}
:checked + .talkbubble:before {
    border-right-color: #666;
}
:checked + .talkbubble:hover:before {
    border-right-color: #666;
}
.clickables input[type="radio"] {
    position: absolute;
    visibility: hidden;
    pointer-events: none;
}

..and also removed !important as suggested by Danko.