CSS: Partial Attribute Value Selector, need a good example

[SparceMatrix]

In my O'Relly CSS Pocket Reference I found a selector called a Partial Attribute Value Selector which looks like this:

element[attr~="value"]

I interpret this to mean that if a create a style,

td[class~="MyStyle"] { font-weight: bold; }

then

<td class = "MyStyleA">Text Example</td>

will show "Text Example" in bold, all other things being equal.

No? I'm not getting that result. Am I missing something? How about a good example to illustrate how this works.

I am seeing some other discussion on line about CSS3 where this is developed further so that you can make partial selection from the beginning or end of the attribute value, for example.

 

[Foamcow]

That isn't going to work in IE and I doubt it works in FF either.

Generated content is not really well supported (if at all in IE) yet and yes it's CSS 3 which is some way off being implemented in browsers.

You best find another solution as you cannot rely on this method yet.

You can do a similar sort of thing using normal classes by using multiple classes at a time. So you could do

.arfle { font-weight:bold; }

.barfle { color:#ff0000; }

.gloop { color:#00ff00; }

Then apply the classes like so

<p class="arfle">Bold text</p>

<p class="barfle">Red text</p>

<p class="gloop">Green text</p>

<p class="arfle barfle">Bold and red</p>

<p class="arfle gloop">Bold and green</p>

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[SparceMatrix]

OK. Too bad, I could use it.

My pocket reference only goes up to CSS2 and the other discussion here,

http://cssdreams.com/tu/notations.php

did not mention the selector I was trying to apply.

But thanks for your lightning fast reply.