CSS: Ordered List from positive to negative without zero? - html

Question

Is it possible to create an ordered list with positive to negative without zero using only CSS?
Example:
3. Highest
2. Higher
1. High
-1. Low
-2. Lower
-3. Lowest
I understand the presentation is highly unusual. The intent is to create, with one field, a list of most and least favorites.
Some technical background: The field is generated in Joomla! CMS via FLEXIcontent's Text Field. The field is configured to be able to take multiple entries, and is restricted to only be able to take an even number of entries. The user is required to input an equal number of pros and cons for the given field. I'd like to be able to control everything exclusively in CSS so I don't have to create template overrides, if at all possible.
I've chosen this approach as I don't want to require multiple fields for one set.
I've found various resources for styling the numbers. I believe the following wouldn't work as I'd have to control some factors with PHP or there's limits to the markup:
<ol>
<li value=#>List Item</li> <!--needs value populated by PHP-->
</ol>
<ol reversed> <!--Stays positive and ends at 1-->
<li>Reversed List</li>
</ol>
<ol reversed start=2> <!--Can I control where to start based on number of children?-->
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ol>
If the task is completely impossible, it may be more practical to style based on number of children and color the first and last half differently. Still, it'd be very interesting to see if this is possible with CSS exclusively.

Answer 1

Great question! This is something a little different and an interesting example of what CSS can do.
See the code below for a solution to your problem. If you are using SASS you could easily create a mixin to generate all the selectors you need.
By using CSS counters you can fake the list number and then use nth-child to reset the counter to avoid displaying a 0 item.
Solution with a starting number
ol {
list-style: none;
margin: 0;
padding: 0 0 0 1.5em;
}
ol[start="1"] {
counter-reset: ol 2;
}
ol[start="1"] li:nth-child(2) {
counter-reset: ol 0;
}
ol[start="2"] {
counter-reset: ol 3;
}
ol[start="2"] li:nth-child(3) {
counter-reset: ol 0;
}
ol[start="3"] {
counter-reset: ol 4;
}
ol[start="3"] li:nth-child(4) {
counter-reset: ol 0;
}
ol li::before {
counter-increment: ol -1;
content: counter(ol) '.';
text-align: right;
margin: 0 .5em 0 -1.5em;
display: inline-block;
width: 1em;
}
<h2>Start at 1</h2>
<ol start="1">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
</ol>
<h2>Start at 2</h2>
<ol start="2">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
</ol>
<h2>Start at 3</h2>
<ol start="3">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
</ol>
Solution without starting number but with same number of positive and negative list items
If you want this to work without having to add the start attribute to the ol and always have the same number of positive and negative list items you can use this CSS - but again it requires that you write it out the selectors for all the required numbers of items.
ol {
list-style: none;
margin: 0;
padding: 0 0 0 1.5em;
}
/* two items */
ol li:nth-child(1):nth-last-child(2) {
counter-reset: ol 2;
}
ol li:nth-child(2):nth-last-child(1) {
counter-reset: ol 0;
}
/* fouritems */
ol li:nth-child(1):nth-last-child(4) {
counter-reset: ol 3;
}
ol li:nth-child(3):nth-last-child(2) {
counter-reset: ol 0;
}
/* six items */
ol li:nth-child(1):nth-last-child(6) {
counter-reset: ol 4;
}
ol li:nth-child(4):nth-last-child(3) {
counter-reset: ol 0;
}
ol li::before {
counter-increment: ol -1;
content: counter(ol) '.';
text-align: right;
margin: 0 .5em 0 -1.5em;
display: inline-block;
width: 1em;
}
<h2>Two Items</h2>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
<h2>Four Items</h2>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
<h2>Six Items</h2>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
</ol>