Christopher Tidy
Apr 3 2009, 01:42 PM
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
Apr 3 2009, 02:10 PM
No. CSS isn't a programming language. I assume JavaScript could.
Darin McGrew
Apr 3 2009, 02:12 PM
I just include a class in situations like this, and I select the styles using the class.
Christopher Tidy
Apr 3 2009, 02:23 PM
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
Apr 3 2009, 02:40 PM
Yeah, if you really need it to depend on the text and you don't know what the text is beforehand.
Christopher Tidy
Apr 3 2009, 02:45 PM
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
Apr 3 2009, 02:57 PM
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
Apr 3 2009, 03:32 PM
Attributes are also fewer than words.

Above all, they are HTML. Words are not.
Frederiek
Apr 3 2009, 04:23 PM
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
Apr 3 2009, 04:33 PM
The OP wants to color the text diffrently depending on exactly what digit the first "letter" is.
Frederiek
Apr 3 2009, 04:34 PM
I know, but it's a start, no?
pandy
Apr 3 2009, 04:36 PM
No.

Not as I understand the question, which can very well be wrong.
Christopher Tidy
Apr 3 2009, 05:02 PM
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
Apr 3 2009, 06:41 PM
QUOTE(Christopher Tidy @ Apr 3 2009, 09:23 PM)

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
Apr 3 2009, 06:58 PM
QUOTE(Christian J @ Apr 3 2009, 11:41 PM)

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

Good philosophy, Christian.
Chris
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please
click here.