Imagine a scenario where you have a list of questions that start at 0 and you want to apply CSS styling based on their value. For instance, consider the following list...
<b>How are you feeling?</b>
<ol start="0">
<li>Great</li>
<li>Good</li>
<li>Fine</li>
<li>I don't understand</li>
</ol>
Is there a way to achieve this using pseudocode like the one below?
ol li {
color: rgb(180, 180, 180);
}
ol li:value-of-child(2) {
color: rgb(0, 0, 0);
}
This would result in the following display:
https://i.sstatic.net/YrfAy.png
I attempted the following approach but it did not yield the desired outcome.
ol li {
color: rgb(180, 180, 180);
}
ol li:nth-child(calc(my_value - 1)) {
color: rgb(0, 0, 0);
}
The value for my_value is input by the user through a separate text field from a different application, and I am constrained from using JavaScript to address this issue. It may sound unconventional, but my options are limited due to restrictions imposed by the document format I'm working with.
UPDATE: While I acknowledge the constraints I'm operating under, let's avoid assuming this is an XY problem.
My situation involves working with an app that does not allow JavaScript on the front-end but outputs content using WebKit that can be influenced by HTML/CSS. The use of JavaScript is prohibited to maintain readability as plain text and uphold company standards against integrating JS into our workflows.
The presentation of the list mentioned earlier operates independently from how users provide input. Due to character limits, any responses exceeding a certain length need to be truncated. To address this, each list is accompanied by a popup menu offering selections numbered 0-3 which are then displayed multiple times in the narrative. Utilizing the selected value allows for modifications using CSS selectors such as :nth-child.
In my case, the numbering of the list starts at 0, illustrating a decision made by the test creator regarding scoring ranges. Therefore, simply incrementing all values by 1 is not viable as the content cannot be modified, only reproduced accurately.
While looking for solutions, the goal was to optimize the appearance of the generated document without affecting interactive elements. This effort aims to enhance readability, especially within the application or when generating a PDF version of the document.
Despite limitations, leveraging CSS provides a means to improve the overall visual output of the narrative section of the document, making it more accessible and engaging.