How can I change the color of label with * in text

Question

I have labels like this

<label> User Type*: </label>

Now is there any way to change the color of label to red if text contains * in it only with CSS

All I can do is edit css. I can't use Javascript.

Answer 1

No, without javascript you won't be able to style only the *. what you will need to do is to put the * in its own element, and style that element.

Example:

HTML

<label> User Type<span>*</span>: </label>

CSS

label span { color: red; }

example fiddle: http://jsfiddle.net/Ee9L3/

EDIT: looks like i misread the question. No there's no way to do what you want. The easiest alternative would be to just add a class to the label.

HTML

<label class='required'>User Type*: </label>

CSS

label.required { color: red; }

Answer 2

There is no way to change only the * in CSS. I would recommend doing something like this:

<label> User Type<span class="red">*</span></label>

If you can't change the HTML, you may be out of luck. I guess you could do something like this in your CSS:

label:after {
   content: "*";
   color: red;
}

Answer 3

Sorry but - If you can't edit the html and can't use javascript - there is no way to do this with just css (yet?!)

Answer 4

CSS3 had a very short-lived :contains() pseudo class if I remember correctly. Unfortunately it has been removed from the spec and there is no way to do this with CSS alone.

IE had a means of attaching JavaScript behaviors to CSS using .HTC files. However, that only works in IE and not in any other browser, so it's not a good answer.

You would need some sort of JavaScript or access to the HTML itself. That's the only way. Sorry.

Answer 5

This is easy. This is a mixture of previous answers.

HTML:

<label class='required'>Direcció <span class="red">*</span></label>

CSS:

label.required>span.red{ color: red; }