Help - Search - Members - Calendar
Full Version: Use CSS to perform a boolean test on an element's content?
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
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. happy.gif 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. tongue.gif Not as I understand the question, which can very well be wrong. biggrin.gif
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
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. wub.gif
Christopher Tidy
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. wub.gif


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.
Invision Power Board © 2001-2014 Invision Power Services, Inc.