Printable Version of Topic

Posted by: 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

Posted by: pandy Apr 3 2009, 02:10 PM

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

Posted by: 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.

Posted by: 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

Posted by: 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.

Posted by: 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

Posted by: 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

Posted by: pandy Apr 3 2009, 03:32 PM

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

Posted by: 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.

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

Posted by: pandy Apr 3 2009, 04:33 PM

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

Posted by: Frederiek Apr 3 2009, 04:34 PM

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

Posted by: pandy Apr 3 2009, 04:36 PM

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

Posted by: 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

Posted by: Christian J Apr 3 2009, 06:41 PM

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

Posted by: Christopher Tidy Apr 3 2009, 06:58 PM

Good philosophy, Christian.

Chris