Menu
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.
796
You will begin by using the type selector to select HTML elements to style. Then, you will combine selectors to identify and apply styles more precisely. Lastly, you will group several selectors to apply the same styles to different elements.
CSS Conditional Rules are nothing but a feature of CSS in which the CSS style is applied based on a specific condition. So the condition here can be either true or false and based on the statements/style will get executed. These rules eventually come under CSS at-rule as they start with an @.
It's easy to apply style to a child element, but if you want to apply style to a parent class that already has child elements, you can use the CSS selector child combinator ( > ), which is placed between two CSS selectors. For example, div > p selects all <p> elements where the parent is a <div> element.
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
133
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
