Conditional styling of an element

Question

I am trying to apply a style to a specific element ie. elements with a value of Priority 1 should be red and Priority 3 should be green

Is there a way for me to apply a conditional styling in css? I cannot change the html or alter it.

here is the css code:

.priorityDerived_shortCodeCell{
background: none repeat scroll 0 0 #EC1818 !important;
}

Thanks in advance

Please show the markup also for priority 2 and 3: does the markup change? What's the purpose of `idx` attribute? Is it related to the priority? — Fabrizio Calderan, Nov 12 '18 at 16:35
"Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a [Stack Snippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See How to [create a Minimal, Complete, and Verifiable](http://stackoverflow.com/help/mcve) example." — rawnewdlz, Nov 12 '18 at 16:39
If we have to retype your code manually just so we can test it, nobody will help you. Don't post screenshots. — Domino, Nov 12 '18 at 16:47
Presuming the `idx` attribute contains the priority value, this could be used in your CSS selector: `.priorityDerived_shortCodeCell[idx="1"]` — ecolema, Nov 12 '18 at 16:52
@ecolema I like your solution and I tried it but it doesn't work. Are there any other ways that you can think of to make it work? — Fast Chip, Nov 12 '18 at 18:41
Use javaScript to add class names to each element with 'idx' attribute: `$('[idx]').each(function(){ $(this).addClass('idx_' + $(this).attr('idx')); });` CSS: `.idx_1 {}` and so on. — ecolema, Nov 13 '18 at 15:34

score 0 · Answer 1 · answered Nov 12 '18 at 17:01

Ordinarily you could use this:

<style>.red { color: red; }</style>
<table>
    <tr>
        <td>PRIORITY1</td>
        <td>PRIORITY2</td>
        <td>PRIORITY3</td>
        <td>PRIORITY1</td>
    </tr>
</table>
<script>$('td:contains("PRIORITY1")').addClass("red");</script>

Since you do not have control of the HTML file or the serving routine, one of very few solutions would be to program a plug-in to Chrome and have Chrome color the lines :-)

Conditional styling of an element

1 Answers1