How to replace a specific text in CSS?

Question

I have a table and I want to replace "1" by "X" and "0" by "". Is it possible with CSS ?

<table>
    <tr>
        <td>1</td>
        <td>0</td>
    </tr>
</table>

If your tds have specific classes or IDs, then yes. Not based on content alone. — Mr Lister, Aug 05 '13 at 19:42
[Possible duplicate](http://stackoverflow.com/questions/7896402/how-can-i-replace-text-through-css). [Related question](http://stackoverflow.com/questions/11482591/why-is-it-impossible-to-change-content-in-css). — ajp15243, Aug 05 '13 at 19:43
That isn't CSS's responsibility - CSS is to style existing content, not to create or manipulate it directly. — Dai, Aug 05 '13 at 19:43
@Dai while you're right conceptually, CSS does have tools to make content invisible and to introduce other text that replaces it. Would it have been all right with you if the OP asked for an _image_ that replaced the `1` and the `0`? Or, different fonts for `1`s and `0`s? — Mr Lister, Aug 06 '13 at 04:57

score 4 · Accepted Answer · answered Aug 05 '13 at 19:43

4

This sounds like a job for jQuery.

HTML

<table>
    <tr>
        <td>1</td>
        <td>0</td>
    </tr>
</table>

jQuery

$('td').each(function(){
  if ($(this).text() == '1') { $(this).text('X'); }
  if ($(this).text() == '0') { $(this).text(''); }
});

answered Aug 05 '13 at 19:43

CaribouCode

13,998
28
102
174

The OP asked 'Is it possible with CSS'. Since it isn't really the job of CSS to replace things, and not possible without altering the HTML, I posted a solution that is more appropriate. – CaribouCode Aug 05 '13 at 19:51
Don't need jQuery. Just use plain javascript. – Rob Aug 05 '13 at 20:16
@Rob Added the non jquery solution to my answer just in case anyone needs it without :) – Marcel Gwerder Aug 05 '13 at 20:20

Marcel Gwerder · Answer 2 · 2013-08-05T20:14:45.097

You could do something like this (DEMO):

td {
    font-size:0;
}

td:first-child:after {
    content: "X";
    font-size: 14px;
}

But thats ugly and I personally prefer javascript for such a task. So do not use this solution. It's just not the task of css to do something like that.

In jQuery it would be as easy as this:

$('td:contains("1")').text('X');
$('td:contains("0")').text('');

And not to forget in plain javascript:

var tds = document.getElementsByTagName('td');

for(var i = 0; tds[i]; i++) {
    if(tds[i].innerHTML == '1') tds[i].innerHTML = 'X';
    if(tds[i].innerHTML == '0') tds[i].innerHTML = '';
}

Venkata Krishna · Answer 3 · 2013-08-05T19:56:08.990

You could do this if you're sure that you want the exact behavior by using just CSS

td:first-child:after
{ 
    content:"X";
}
td:first-child + td:after
{ 
    content:"";
}

But for this to work, you must have empty columns..

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

EDIT: For the sake of completion, if your html is as simple as it looks in the question, I would go with the above approach but if your html is more dynamic & unpredictable, obviously you need to opt for javascript/jQuery approach.

score 0 · Answer 4 · answered Aug 05 '13 at 19:57

0

You can do this with some visibility, after and content

DEMO http://jsfiddle.net/kevinPHPkevin/hJyd8/

td:nth-child(1) {
 visibility: hidden;
}
td:nth-child(1):after {
    content:"2";
    visibility:visible;
}
td:nth-child(2) {
 visibility: hidden;
}
td:nth-child(2):after {
    content:"''";
    visibility:visible;
}

answered Aug 05 '13 at 19:57

Kevin Lynch

24,427
3
36
37

1

The problem of `visibility` is that it will leave the space of the 0 and 1 reserved in the td. – Marcel Gwerder Aug 05 '13 at 20:01

How to replace a specific text in CSS?

4 Answers4