How can I change the CSS of a specific word?

Question

I've been searching for this answer for a while but could not find any specific information on this.

To put it down in words: I want to change the color of a specific words in a class.

Example: if the class contains the word Online it would make it a green color. if the class contains the word Offline it would make it red.

now for the code:

<section class="even">
                <h5>Voltz 2.0.4</h5>
                <span class="tag version"><span>1.5.2</span></span>
                <div class="serverinfo">
                    <p>Status: <span class="status"></span></p>
                    <p>Players: <span class="voltz-onlineplayers"></span>/<span class="voltz-maxonlineplayers"></span></p>
                    <p>IP: voltz.arcadia.eu</p>
                </div>
                <a class="button" href="vote.html#voltz">Vote</a>
                <a class="button" href="modpacks.html#voltz">Modpack Info</a>
            </section>

the class voltz-online will either fill in the word online or offline regarding on the response of the server (already been done).

but i want to check if the class status contains the word online or offline. I'm not entirely sure what I should use to get that effect.

I'm pretty sure I have to use this function but that's as far as I got.

$( document ).ready(function() {
        //code to change color here.
    });

I'd be great if anyone could explain this with an example code. And feel free to ask questions if you're missing information

Edit: to give a visual example of what I mean to make things a bit more simple.

where i want the highlighted text to become green when it says Online and red when it says Offline.

Answer 1

You can actually do this easily with CSS.

[class*=online] {
  color: green;
}
[class*=offline] {
  color: red;
}

This CSS selector is looking for any element with an attribute named class and the *= is telling the browser to look if the following string exists anywhere within that attribute's value.

So any classes with name something-online or offline-something or any combination will be matched by this selector.

You can use this same selector with jquery and set the css styles, but using script for this is unnecessary.

Edit:

Thanks to UndoingTech for providing a link to the attribute selectors reference. I'm including it in the answer to make it easier to find http://www.w3schools.com/css/css_attribute_selectors.asp

Attribute selectors are extremely powerful and often overlooked. Since jQuery uses CSS selectors, all attribute selectors work in script as well.

Edit:

Based on clarification on the original question, here is the proper solution for changing the color style of an element with a particular class based on the text inside of that element.

$(function() {
  $(".status").each(function() {
    var text = $(this).text().trim().toLowerCase();
    if (text === "offline") {
      $(this).css("color", "red");
    } else if (text === "online") {
      $(this).css("color", "green");
    }
  });
});

This code finds all elements with the .status class, then .each() loops through each element and calls the inline function once for each element. This function trims and converts all text to lowercase, and then compares the value of that text with either "offline" or "online" and then sets the css color of the element accordingly.

Answer 2

Thanks for posting the picture. It really cleared things up.

Here is a jQuery solution. I wasn't sure if you had more than one status per page, so I made it work just in case you had more than one.

$(document).ready(function() {
      var status = $(".status");
      status.each(function(index) {
          if ($(this).text() == "Online") {
            $(this).css("color", "green");
          } else {
            if ($(this).text() == "Offline") {
              $(this).css("color", "red");
            } // end if
          } // enf else
        }); // end each
      }); // end ready

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<section class="even">
  <h5>Voltz 2.0.4</h5>
  <span class="tag version"><span>1.5.2</span></span>
  <div class="serverinfo">
    <p>Status: <span class="status">Offline</span>
    </p>
    <p>Players: <span class="voltz-onlineplayers"></span>/<span class="voltz-maxonlineplayers"></span>
    </p>
    <p>IP: voltz.arcadia.eu</p>
  </div>
  <a class="button" href="vote.html#voltz">Vote</a>
  <a class="button" href="modpacks.html#voltz">Modpack Info</a>
</section>

I could not have made this answer without this helpful documentation on jQuery selecor.each().

Answer 3

@Joel's answer is much better, but since you asked for a solution in jQuery, this would help.

$( document ).ready(function() {
     var status = $('.status');
     if(status.hasClass('voltz-online')) {
          status.css('color', 'green');
     } else if (status.hasClass('voltz-offline')) {
          status.css('color', 'red');
      } 
});