इसके मूल्य के आधार पर एक सीएसएस आइटम स्टाइलिंग

Question

मेरे पास प्रतिशत की सूची है जो 0% से 200% तक है।

क्या उनके मूल्य के आधार पर उन संख्याओं को स्टाइल करने का कोई तरीका है यानी संख्या 0% - 100% हरा और संख्या 101%> लाल हो?

कृपया ध्यान दें, मेरे पास इसके लिए HTML, केवल सीएसएस तक पहुंच नहीं है।

अग्रिम धन्यवाद,

टॉम पर्किन्स

संपादित करें:

प्रश्न में एचटीएमएल पढ़ता है:

<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> 

और सीएसएस पढ़ता है:

@-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; 
} 

उम्मीद है कि मदद करता है।

Answer 1

आप प्रतिशत निर्धारित कर सकते हैं, तो < 100% 0 099 की तरह% के साथ शुरू करने के लिए, आप इस्तेमाल कर सकते हैं attr साथ शुरू होता है, और attr चयनकर्ता बराबर होती है। आधुनिक ब्राउज़रों में काम करता है और यानी 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% */ 

वैकल्पिक रूप से आप सब 200 अजीब रूपों आप के लिए एक चयनकर्ता, जो काफी लंबे समय से

Answer 2

चूंकि, इसमें शामिल मूल्यों का मूल्यांकन है, यह सीएसएस के साथ नहीं किया जा सकता है।

लेकिन, जावास्क्रिप्ट जो भी आप खोज रहे हैं वह कर सकता है।

Answer 3

मुझे यह भी विश्वास नहीं है कि इस समय केवल सीएसएस का उपयोग करके कोई संभावना नहीं है ... मैं दो सीएसएस वर्गों "हरे" और "लाल" (या इसी तरह) को परिभाषित करने और जावास्क्रिप्ट में एक छोटा मूल्यांकन करने का सुझाव दूंगा या PHP को तत्वों को कक्षाएं असाइन करने के लिए ...

क्षमा करें, लेकिन इसे किसी भी प्रकार से HTML तक पहुंच की आवश्यकता है।

Answer 4

यह वास्तव में उन HTML तत्वों की तरह और संरचना पर निर्भर करता है जिन्हें आप चुनना चाहते हैं। यदि आपके पास केवल <span> या <td> तत्व बिना किसी प्रकार की अर्थपूर्ण संरचना के हैं, तो यह काम नहीं करेगा।

लेकिन यदि आपके पास title, class आदि जैसे गुण हैं, तो आप sth कर सकते हैं। इस तरह:

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