Use different css based on content of element?

Question

This is a theoretical question about the capabilities of CSS.

I know normal practice is to change this server side, but I was wondering if it's possible to use alternate css based on the content of an element. For example if a table division element contains a 0 style it one colour.

<td class="result">0</td>

And anything higher than 0 style an alternate colour

<td class="result">1</td>

<td class="result">5</td>

hmm don't think you can achieve this with pure css. – Alex Char Sep 24 '14 at 15:22 — Alex Char, Sep 24 '14 at 15:22

score 2 · Answer 1 · answered Sep 24 '14 at 15:25

2

A way this can be achieved is by using HTML5 data attributes, but this requires you to slightly modify your markup (which usually isn't a problem if it's dynamically generated):

HTML:

<td data-result="1">1</td>

CSS:

td[data-result="1"] { ... }

Working JS Bin

For a full browser support, it's better to use JavaScript.

answered Sep 24 '14 at 15:25

Lorenzo Marcon

8,029
5
38
63

1

I guess if I applied this to result of 0 instead of 1 then anything other than 0 would inherit the normal styling – blarg Sep 24 '14 at 15:31
Correct. Try it out with different CSS – Lorenzo Marcon Sep 24 '14 at 15:36

Use different css based on content of element?

1 Answers1

Linked