Use CSS to perform a boolean test on an element's content? |
Use CSS to perform a boolean test on an element's content? |
Christopher Tidy |
Apr 3 2009, 01:42 PM
Post
#1
|
Newbie Group: Members Posts: 15 Joined: 3-May 07 Member No.: 2,708 |
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
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
No. CSS isn't a programming language. I assume JavaScript could.
|
Darin McGrew |
Apr 3 2009, 02:12 PM
Post
#3
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
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
Post
#4
|
Newbie Group: Members Posts: 15 Joined: 3-May 07 Member No.: 2,708 |
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
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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
Post
#6
|
Newbie Group: Members Posts: 15 Joined: 3-May 07 Member No.: 2,708 |
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
Post
#7
|
Newbie Group: Members Posts: 15 Joined: 3-May 07 Member No.: 2,708 |
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
Post
#8
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Attributes are also fewer than words. Above all, they are HTML. Words are not.
|
Frederiek |
Apr 3 2009, 04:23 PM
Post
#9
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
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
Post
#10
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
The OP wants to color the text diffrently depending on exactly what digit the first "letter" is.
|
Frederiek |
Apr 3 2009, 04:34 PM
Post
#11
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
I know, but it's a start, no?
|
pandy |
Apr 3 2009, 04:36 PM
Post
#12
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
No. Not as I understand the question, which can very well be wrong.
|
Christopher Tidy |
Apr 3 2009, 05:02 PM
Post
#13
|
Newbie Group: Members Posts: 15 Joined: 3-May 07 Member No.: 2,708 |
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
Post
#14
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
|
Christopher Tidy |
Apr 3 2009, 06:58 PM
Post
#15
|
Newbie Group: Members Posts: 15 Joined: 3-May 07 Member No.: 2,708 |
|
Lo-Fi Version | Time is now: 26th April 2024 - 04:00 AM |