CODEWITHSUNDEEP
cssattributescss-selectors
Tom Perkins
Tom Perkins

Reputation: 499

Styling a CSS item depending on it's value

I have a list of percentages that range from 0% through to 200%.

Is there a way to style those numbers depending on their value i.e. make numbers 0% - 100% be green and numbers 101% > red?

Please note, I don't have access to the HTML for this, just CSS.

Thanks in advance,

Tom Perkins

Edit:

The HTML in question reads:

    <td class="HtmlGridCell" colspan="5" align="Left"> </td>
    <td class="HtmlGridCell" colspan="2" align="Left"><span class="progress" title="303%"><span class="indicator warning" style="width: 100%;"> </span></span></td>

And the CSS reads:

@-moz-document url("https://customstudio.workflowmax.com/job/joblist.aspx") {
.progress:after {
content: attr(title);
font-size: 14px;
position: relative;
left: 122px;
top: -27px;
float: left;
color: #666;
background-color: #efefef;
-moz-border-radius: 4px;
padding: 5px;
border: 1px solid #cfcfcf;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

Hope that helps.

Upvotes: 8

Views: 12656

Answers (4)

Blowsie
Blowsie

Reputation: 40535

If you could set the percentages <100% to start with a 0 like 099% , You could use the attr starts with, and attr equals selector. Works in modern browsers and ie 7 +

 .progress[title^=1], .progress[title^=2] { background: red; } /* Starts with 1 or 2*/
 .progress[title^=0], .progress[title=100%], { background: green; } /* Starts with 0 or is 100% */

Alternatively you could make a selector for all 200 odd variations you have , which is quite long winded

Upvotes: 9

Munneson
Munneson

Reputation: 892

This really depends on the kind and structure of HTML elements you'd want to select. If you have only <span> or <td> elements without any kind of semantic structure it won't work.

But if you happen to have attributes like title, class, etc you could do sth. like this:

span[attributeName="attributeValue"] {color: #FF0000}

Upvotes: 0

poeschlorn
poeschlorn

Reputation: 12440

I am also not convinced that there is no possibility by using only CSS at the moment...I would suggest defining two CSS classes "green" and "red" (or corresponding) and making a small evaluation in JavaScript or PHP to assign the classes to the elements...

Sorry, but this needs access to HTML in any kind.

Upvotes: 0

Sathish Manohar
Sathish Manohar

Reputation: 6119

Since, there is evaluation of values involved, It can not be done with CSS.

But, Javascript may do what you are looking for.

Upvotes: 0

Related Questions