Changing Data Values using CSS

[sgconger]

I have a list of data values that are in an html <span id=x>1. My List
One</span>. I want to be able in CSS (not change the html) to remove
the 1. so that when it is displayed all I get is My List One. It
seems like there should be a way to do this using CSS. Any help would
be greatly appreciated.

Thanks,
Susan Conger

 

[Adrienne Boswell]

Gazing into my crystal ball I observed (e-mail address removed) writing in

I have a list of data values that are in an html <span id=x>1. My List
One</span>. I want to be able in CSS (not change the html) to remove
the 1. so that when it is displayed all I get is My List One. It
seems like there should be a way to do this using CSS. Any help would
be greatly appreciated.

Thanks,
Susan Conger

AFAIK, there is no way to do that. You can generate content, but not
take it away. What you would want to do is
<p>My <span class="hide">disappearing</span> text.</p> where .hide would
be display:none (completely removes the content) or visibility:hidden (is
still in the document flow). If this is coming from a server side db or
something, you could do:
<ol>
<!-- start your loop -->
<li><!-- item --></li>
<!-- end loop -->
</ol>

Then you could appropriately style the ol element to show or not.

 

[Toby A Inkster]

I have a list of data values that are in an html <span id=x>1. My List
One</span>. I want to be able in CSS (not change the html) to remove
the 1. so that when it is displayed all I get is My List One. It
seems like there should be a way to do this using CSS.

You could remove the "1", but you can't easily remove the ". ". To remove
the "1" you can use:

#x:first-letter { display: none; }

but this will only work when used on a block element (e.g. <div>, <p>,
etc) -- not on an inline element (e.g. <span>).

You'd be better off using client-side scripting. Something like:

<script type="text/javascript">
function addEvent(obj, evType, fn)
{
if (obj.addEventListener)
{
obj.addEventListener(evType, fn, false);
return true;
}
else if (obj.attachEvent)
return obj.attachEvent('on'+evType, fn);
else
return false;
}

function my_changer()
{
var span = document.getElementById('x');
var x = span.innerHTML.replace(/^[0-9]+\.\s*/, '');
span.innerHTML = x;
}
addEvent(window, 'load', my_changer);
</script>

--
Toby A Inkster BSc (Hons) ARCS
[Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
[OS: Linux 2.6.12-12mdksmp, up 27 days, 12:59.]

PHP Linkifier
http://tobyinkster.co.uk/blog/2007/07/18/linkify/

 

[Jim Moe]

I have a list of data values that are in an html <span id=x>1. My List
One</span>. I want to be able in CSS (not change the html) to remove
the 1. so that when it is displayed all I get is My List One. It
seems like there should be a way to do this using CSS. Any help would
be greatly appreciated.

An URL to a test case would be useful.
Is the list in an actual list element like an <ol>? Or a pseudo-list of
some sort?
Given that you have the <span>, I'd guess a pseudo-list. In that case
use another <span> to control the presence of the number:

<span id=x><span class="or_or_off">1. </span>My List One</span>

 

[Mark Barratt]

wrote...

I have a list of data values that are in an html <span id=x>1. My List
One</span>. I want to be able in CSS (not change the html) to remove
the 1. so that when it is displayed all I get is My List One. It
seems like there should be a way to do this using CSS. Any help would
be greatly appreciated.

You can't actually process the html content with CSS - that's not
what CSS does.

You should be able to hide the beginning of each item by
positioning it negatively in a block, and setting the block's
overflow property to hidden. This would take some fiddling around
to work properly in all browsers, however.