Javascript pseudo element control

Question

I'm trying to make color

talkbubble color-coded fully by pressing.

I ran into the problem of getting the :before pseudo-element, which I use (to form an arrow for talkbubble), to actually change colors with the rest of the element, as shown 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 the daemon http://jsfiddle.net/petiteco24601/3xuuq2fx/

I did some research, and that seems a little flimsy. For the most part, many of what I found mostly said that there is no way to really force javascript on the pseudo-element, since the pseudo-element DOES NOT really exist.

However, with a lot of research, I found things like http://css-tricks.com/pseudo-element-animationstransitions-bug-fixed-in-webkit/ and Change HTML5 color of CSS input markups that say that these errors have been fixed, and with some browsers javascript can be used for pseudo-elements. What is the real deal? How wide can a person control pseudo elements?

Answer 1

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

• Removing the !important declaration on your CSS first is bad practice and may later be conflicting.

• Then create a new class with the desired change:

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

• Then with jquery add / remove class:

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

Check DemoFiddle

Answer 2

If you are only looking for a CSS solution without using javascript. There he is:

Working script

I packed every block of the list with a label and a radio button in the 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 deleted !important , as suggested by Danko.

Answer 3

The only way I was able to modify CSS pseudo-declarations was to create separate <style> tags with an identifier and an identifier associated with the class of elements to which they apply. I.e.

 <style id="talkbubble_style"> .talkbubble:before{ border-right-color:#666666; } </style> 

So, when you handle the click event, you get a style element and change innerHTML to whatever CSS you want, along with the !important option added to each definition. Like this:

 $('.clickables').on('click','.talkbubble',function () { $(this).parent().find('.talkbubble').css('background-color','#ffffff'); $(this).css('background-color', '#666666'); $('#talkbubble_style').html('.talkbubble:before{border-right-color:#666666!important;}'); });