style based on tag content

I'd like to change the color of text in a table data field based on the
content...

For example, I'd like all <td>pos</td> to show the "pos" in red. All
<td>pending</td> should show as the normal black. I don't really want
to have to add a class or a style, but that's how I've been doing it so
far...

I seem to remember that this is possible, I just can't remember the
syntax right now and I'm not having any luck with google...

Thanks in advance,

Jeff P.

On 27 Apr 2006 11:17:13 -0700, jpolaski (AT) rgs (DOT) uci.edu wrote:

I'd like to change the color of text in a table data field based on the
content...

For example, I'd like all <td>pos</td> to show the "pos" in red. All
td>pending</td> should show as the normal black. I don't really want
to have to add a class or a style, but that's how I've been doing it so
far...

I seem to remember that this is possible, I just can't remember the
syntax right now and I'm not having any luck with google...

As you process the data to put it in the table, check to see what it
is and then give the <td> the appropriate class.

For example in php:

$myClass="";
if ($row->status == "pos")
$myClass="pos";
if ($row->status == "pending")
$myClass="pending";

$myData .= "<td class=\"$myClass\">$row->status</td>";

Ken

The data isn't in a database for this one... This data get changed
rarely, so it isn't really worth the extra complexity of stuffing
everyting in a db.

Also, it just seems like there should be a simple way to do it with
style sheets. But it looks like you can do styles with *tags*, but not
*content*. Which is a bummer.

For example, it would be nice to italicize "et. al." or "in vivo"
across a site without having to add <i>, or div or span tags?

Don't you think there should be something like:

td:content "pos" {
color: red;
}

or
content "in vivo" {
font: italic;
}

~Jeff P.

On 27 Apr 2006 12:20:03 -0700, jpolaski (AT) rgs (DOT) uci.edu wrote:

Don't you think there should be something like:

td:content "pos" {
color: red;
}

or
content "in vivo" {
font: italic;
}

It's called XML.

Ken

On Thu, 27 Apr 2006 15:35:51 -0400, Ken Loomis
<not_a_real_email (AT) address (DOT) com> wrote:

td:content "pos" {
color: red;
}

or
content "in vivo" {
font: italic;
}

It's called XML.

Actually, come to think of it, even XML can't do that.

It has to be done programatically, AFAIK.

Ken

The closest I can think of is attribute selectors.

http://www.w3.org/TR/CSS21/selector....bute-selectors

[att=val]
Match when the element's "att" attribute value is exactly "val".

However I don't think you can have content as the att. Also, this selector
is NOT cross browser friendly, as although my favourite browser (Firefox)
supports it, 90% of the world's browsers (Internet Explorer) do not.

Martin


<jpolaski (AT) rgs (DOT) uci.edu> wrote

I'd like to change the color of text in a table data field based on the
content...

For example, I'd like all <td>pos</td> to show the "pos" in red. All
td>pending</td> should show as the normal black. I don't really want
to have to add a class or a style, but that's how I've been doing it so
far...

I seem to remember that this is possible, I just can't remember the
syntax right now and I'm not having any luck with google...

Thanks in advance,

Jeff P.

Ken Loomis wrote:

It's called XML.

Actually, come to think of it, even XML can't do that.

Try XSLT

It has to be done programatically, AFAIK.

Yes, but that doesn't have to mean a procedural program language.
XSLT's declarative style makes it very easy.

It's pretty much trivial to take an XHTML document, then transform it
with XSLT to add suitable classes and style the results with CSS. The
transformed document can be practically identical to the original, just
with added classes.

Although you don't need to use XHTML to do this, it's notably easy to
do it with XSLT and a slightly modified XSLT identity transform.

VK wrote:

Use behaviors

Damn... Copying - Pasting code is a real challenge for weak minds like
mine... :-)

-moz-binding: url(zebra.xml#default);
behavior: url(bycontent.htc);

of course:
-moz-binding: url(bycontent.xml#default);
behavior: url(bycontent.htc);

and respectively bycontent.xml is:

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="default">
<implementation>

<constructor><![CDATA[
var rL = this.rows.length;
var cL = 0;
var cR = null;
for (var i=0; i<rL; i++) {
cL = this.rows[i].cells.length;
for (var j=0; j<cL; j++) {
cR = this.rows[i].cells[j];
switch (cR.innerHTML) {
case 'pos' :
cR.style.color = '#FF0000';
break;
case 'at. al.' :
cR.style.fontStyle = 'italic';
break;
default: /*NOP*/
}
}
}
]]></constructor>


<destructor><![CDATA[
// your code here
]]></destructor>

</implementation>
</binding>
</bindings>


In my code I actually add innerText virtual property to the behavior
(binding) for more uniform looking and reliable code. If you don't use
HTML tags in your table cells like <span>pos</span> then the above is
good enough.

Well, yes it will work, but it's a lot of overhead. In this case I'd
rather just add a class to the columns I want made red, though.

I think it's better to keep things simple. If I went for your solution
(which *will* work) I'd have to convert all the HTML documents I have
into XHTML, and then set up XSLT to do what I want. Doesn't that seem a
bit much?

I'm changing the subject slightly, but doesn't it seem like one should
be able to use a simple CSS technique (like 'td:content "pos"' or
'content "in vivo"' from an earlier post)?

Don't get me wrong, I'm not expecting anyone here to add this feature
to CSS. I'm simply pointing out that, now that I think about it, it
looks like a shortcoming of CSS... CSS is ultimatly about styling
content, isn't it?

I think there should be a way to directly style *content*, not just
*tags*.

Thank you, that's what I was thinking of...