Change color of a character

Question

I have the following HTML code:

* Name


* Last Name


         


        

Answer 1

I think I would solve it CSS wise:

label:first-letter {

    color: #ff0000;

}

Example here

Answer 2

If you insist on a scripted solution:

$("p > label:contains('*')").each(function () {
    $(this).html($(this).html().replace("*", "<span class='red'>*</span>"));
});

Demo.

Answer 3

Karim's answer is great, but when implementing it, I noticed it will only select one character within every

tag, so in this case:

<p>
  <label>* Name</label>
  <label>* Last Name</label>
  <label>Mascot Name</label>
</p>

it wont't work. No problem if you replace the selector with "label:contains('*')" in this case, but what if you want to change the color (or other properties) of every instance of that specific character? So in this case:

<p>
  * Name<br/>
  * Last Name<br/>
  Mascot Name
</p>

you really need something else (I know it doesn't look to good, but this is actual output from Wordpress). I found this: Change formatting of a specific character using css or jquery, where Blazemonger's answer does the trick! I'll repeat it here:

$('selector').html(function(i,el) {
  return el.replace(/\*/g, '<span class="color">*</span>');
});​

Answer 4

You should rather use css to make this happen. Use the following instead

<label><span style="color:red">*</span> Name</label>

This will do the work.