The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Use CSS to perform a boolean test on an element's content?
Christopher Tidy
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 3 2009, 02:10 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 14,917
Joined: 9-August 06
Member No.: 6



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


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 3 2009, 02:12 PM
Post #3


WDG Member
********

Group: Root Admin
Posts: 7,986
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.


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christopher Tidy
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 3 2009, 02:40 PM
Post #5


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 14,917
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.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christopher Tidy
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christopher Tidy
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 3 2009, 03:32 PM
Post #8


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 14,917
Joined: 9-August 06
Member No.: 6



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


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 3 2009, 04:23 PM
Post #9


Programming Fanatic
********

Group: Members
Posts: 4,125
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.


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 3 2009, 04:33 PM
Post #10


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 14,917
Joined: 9-August 06
Member No.: 6



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


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 3 2009, 04:34 PM
Post #11


Programming Fanatic
********

Group: Members
Posts: 4,125
Joined: 23-August 06
From: Europe
Member No.: 9



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


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 3 2009, 04:36 PM
Post #12


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 14,917
Joined: 9-August 06
Member No.: 6



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


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christopher Tidy
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 3 2009, 06:41 PM
Post #14


.
********

Group: WDG Moderators
Posts: 5,620
Joined: 10-August 06
Member No.: 7



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


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christopher Tidy
post Apr 3 2009, 06:58 PM
Post #15


Newbie
*

Group: Members
Posts: 15
Joined: 3-May 07
Member No.: 2,708



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th April 2014 - 04:07 AM