Changing Data Values using CSS

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
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.

Susan Conger

Re: Changing Data Values using CSS

Gazing into my crystal ball I observed writing in

Quoted text here. Click to load it

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:
<!-- start your loop -->
<li><!-- item --></li>
<!-- end loop -->

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

Adrienne Boswell at Home
Arbpen Web Site Design Services
Please respond to the group so others can share

Re: Changing Data Values using CSS

sgconger wrote:

Quoted text here. Click to load it

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);
    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);

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

Re: Changing Data Values using CSS wrote:
Quoted text here. Click to load it
  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>

jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Re: Changing Data Values using CSS

Quoted text here. Click to load it

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

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

Mark Barratt, angoltan=E1r budapesten

Site Timeline