CSS to mod superscript

[ControlZ]

I want to add a style that will do the following, but cannot figure out how to do it.

Each place in the HTML where ^{MY COMPANY®} appears, I would like to be able to style the TM or Registered mark so they do not inherit any style as far as size and do not effect the line height.

I've tried various combinations, but nothing seems to work correctly.

Thought about creating a style that looks for ®, but that option will not work. Essentially, in the heading of certain pages, the ® symbol is used with a larger font size then in the body copy. If I set a style for ®, then it will make the ® used elsewhere in the site too large.

One of the ways I tried to make this work is:

*[sup] {font-size: 8px;}

Would like a solution that works in IE 6, 7 and Mozilla based browsers and allows me set CSS without having to modify all pages within the site using ID selectors or span classes.

[Robin_reala]

CSS only lets you select elements, not parts of elements I’m afraid. So I don’t think that what you want is possible.

[SuzyUK]

Robin is right you cannot simply hook into a particular character of an element unless it's in a span..

however have you tried styling the <sup> as a percentage font size so it scales according the element it's inside, would that help?

e.g.
h1 sup {font-size: 50%; vertical-align: top;}
p sup {font-size: 70%; vertical-align: top;}

I tried that on some basic code and it looked not so bad, I found adjusting the vertical alignment helped too, especially in the larger h1