How to colorize the clicked class?

how to keep :active css style after click a button
change background color on button click in html
javascript onclick change background color of div
javascript program to change background color using array
add active class onclick javascript
change background color using javascript function
javascript change background color based on value
change button color after click css

I tried to colorize the clicked class but it colorizes every class. Please check. If he clicks 4. li colorize it blue etc.

<li class="msg-chat-message msg-user-message"><span class="msg-body">sa</span></li>
<li class="msg-chat-message msg-user-message"><span class="msg-body">sa</span></li>
<li class="msg-chat-message msg-user-message"><span class="msg-body">sa</span></li>
<li class="msg-chat-message msg-user-message"><span class="msg-body">sa</span></li>
<li class="msg-chat-message msg-user-message"><span class="msg-body">sa</span></li>

$('.msg-body').click(function() {
    $('.msg-body').css('color','red')
});

It colorizes every msg-body.

Select only the element that is clicked:

$('.msg-body').click(function() {
    $(this).css('color','red');
});

javascript - How to colorize the clicked class?, I tried to colorize the clicked class but it colorizes every class. Please check. If he clicks 4. li colorize it blue etc. <li class="msg-chat-message  So I have a div I want to change the color of when clicked. I have three divs over all and I want to denote which one is the active div when clicking on it Basically I want to use the CSS active property but not have the particular div change back when the mouse up occurs.

As you have all same classes...use this reference

$('.msg-body').click(function() {
   $(this).css('color','red')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="msg-chat-message msg-user-message"><span class="msg-body">sa</span></li>
<li class="msg-chat-message msg-user-message"><span class="msg-body">sa</span></li>
<li class="msg-chat-message msg-user-message"><span class="msg-body">sa</span></li>
<li class="msg-chat-message msg-user-message"><span class="msg-body">sa</span></li>
<li class="msg-chat-message msg-user-message"><span class="msg-body">sa</span></li>

New Perspectives on Microsoft Expression Web, Comprehensive, After you click a link, it becomes a visited link, and the text and underline appear in purple. The CSS pseudo-class selectors allow you more variety in choosing the the link text can appear, for example, in a different color, background color,​  W3.CSS Default Colors. The default color class used in W3.CSS is inspired by Material Design. Material Design colors reflect the colors used in marketing, road signs, and sticky notes.

The other answers are very good, and show how you can change the css color of a message. However, I expect that what you really want to do is mark these messages as selected, so that you can then do something with them...

If your needs end at changing the color of the text then stop reading! The rest of this is excessive... although you might want to think about using .toggleClass() for your text color changes.


Explaination

The code below adds a click event to the message wrapper .msg-chat-message and adds a class .selected. CSS styling then highlights the text of any of it's children as red using the lines below (this may be a bit broad for you, but you can make it more selective):

.msg-chat-message.selected * {
  color: red;
}

I've added a delete button which removes any selected messages, and a second button that 'favourites' them by adding a class with new styling.

Cycling through .selected messages is then easy with the jquery below:

$(".msg-chat-message.selected").each( function() {
  // Do something here
  // You can use $(this) to make changes to the individual elements
});

Demo

// Add click event to the parent wrapper
$('.msg-chat-message').click(function() {

    // Add selected class to this element
    $(this).toggleClass("selected");
    
});


// Add click event to the delete button
$("#delete").click( function() {

  // Delete all the selected messages
  $(".msg-chat-message.selected").remove();
  
});



// Add click event to the delete button
$("#favourite").click( function() {

  // Cycle through each selected item
  $(".msg-chat-message.selected").each( function() {
    $(this).addClass("favourite")
  });
  
  // Deselect all the selected messages
  $(".msg-chat-message.selected").removeClass("selected");

});
.msg-chat-message.selected * {
  color: red;
}

.msg-chat-message.favourite * {
  font-weight: 700;
  text-decoration: underline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<li class="msg-chat-message msg-user-message"><span class="msg-body">Message 1</span></li>
<li class="msg-chat-message msg-user-message"><span class="msg-body">Message 2</span></li>
<li class="msg-chat-message msg-user-message"><span class="msg-body">Message 3</span></li>
<li class="msg-chat-message msg-user-message"><span class="msg-body">Message 4</span></li>
<li class="msg-chat-message msg-user-message"><span class="msg-body">Message 5</span></li>

<button id="delete">Delete Selected</button>

<button id="favourite">Favourite message</button>

Information Technology - Class 10, In the Background group, you'll find a Colors button, which you can click to reveal the drop-down list shown. Then you can choose the color scheme you want to  I have tried several different approaches, such as simply setting a universal color for the entire site or creating a class in css an… I'm having trouble changing the color of my text on my

Foundation of Information Technology MS Office Class 09, Click the OK button. Click on the Fill Color button and choose Olive Green Accent 3 Lighter 60%. ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,​,,,,,  For multiple buttons, to change the current clicked button color use the jquery. Use the same class for all buttons. I used the class "buttonClass". When you click on the button append the class colorChangeClass.

jQuery CSS: Get the background color of an element, jQuery CSS Exercises with Solution: Get the background color of an element. Click on the following paragraphs and get the background color. Next: Add the following class "myclass" to the matched paragraph elements. Create a PCL visualizer in Qt to colorize clouds. Please read and do the PCL + Qt tutorial first; only the coloring part is explained in details here.. In this tutorial we will learn how to color clouds by computing a Look Up Table (LUT), compared to the first tutorial this tutorial shows you how to connect multiple slots to one function.

How To Add Active Class To Current Element, background-color: #f1f1f1; Style the active class (and buttons on mouse-over) */ Loop through the buttons and add the active class to the current/clicked  It shouldn't be difficult to color the way you imagined it to be, here's at the Coloring Class, take a FREE 5 day coloring class and learn how to color instantly like an artist!

Comments
  • WOW. I never thought it would be that easy. Thanks!
  • You're welcome, please consider marking my answer as correct :-)