Use CSS to perform a boolean test on an element's content? Options

[Christopher Tidy]

Hi folks,

Suppose I have the following code:

<SPAN>1.2</SPAN>

Is there any way I can colour the text depending on the first digit of the number which appears in the SPAN? So that for example a number greater than or equal to 1 but less than 2 is red, and a number greater than or equal to 2 but less than 3 is orange? I know I can do it by giving the SPAN a class according to its content, but I was wondering if there's a neater way.

I can't find a reference to any such a method online, but feel that perhaps there should be one given the way that CSS can be used to detect an external link using the "http:", etc.

Any suggestions would be much appreciated.

Many thanks,

Chris Tidy

[pandy]

No. CSS isn't a programming language. I assume JavaScript could.

[Darin McGrew]

I just include a class in situations like this, and I select the styles using the class.

[Christopher Tidy]

Thanks. Is that a definite no, then?

I'd prefer not to use JavaScript. I'd like everything to function without JavaScript, and I can't see it offering any advantages over using a class.

Many thanks,

Chris

[pandy]

Yeah, if you really need it to depend on the text and you don't know what the text is beforehand.

[Christopher Tidy]

Fortunately I know what the text is beforehand. I was just thinking that this would save time parsing the PHP to add the classes, and would reduce the size of the final page. It would be a neat feature to have. Perhaps they'll add it to the next version of CSS?

Many thanks,

Chris

[Christopher Tidy]

Just experimenting...it seems weird that this functionality exists for the name of an attribute, but not for the content of an element. It seems odd that they limited it to the name of an attribute. But I guess that these are often a lot shorter than the content of an element.

Chris

[pandy]

Attributes are also fewer than words. Above all, they are HTML. Words are not.

[Frederiek]

If the <span> has display: block; you could use span:first-letter to color the first letter red.

eg.

CODE

span {
display:block;
    color: green;
}
span:first-letter {
    color: red;
}

Though, I'm not sure how well this is supported by browsers.

[pandy]

The OP wants to color the text diffrently depending on exactly what digit the first "letter" is.

[Frederiek]

I know, but it's a start, no?

[pandy]

No. Not as I understand the question, which can very well be wrong.

[Christopher Tidy]

Thanks for the thoughts. Frederiek, I don't want to colour the first letter differently to the rest of the text contained within the element. I want to colour all the text within the element according to the first character of the text, which will be a number.

Best wishes,

Chris

[Christian J]

I'd prefer not to use JavaScript. I'd like everything to function without JavaScript

A page shouldn't depend on neither CSS nor JS, both should be regarded as enhancements.

[Christopher Tidy]

A page shouldn't depend on neither CSS nor JS, both should be regarded as enhancements.

Good philosophy, Christian.

Chris