How can I create custom counter styles for a reversed ordered list:
C10. Item 10
C9. Item 9
C8. Item 8
C7. Item 7
C6. Item 6
C5. Item 5
C4. Item 4
C3. Item 3
C2. Item 2
C1. Item 1
I found this link which perfectly describes how to achieve a custom numbering in ascending order. How can I modify the following to get a reverse custom numbering and apply it to only a specific listing?
<!DOCTYPE html>
<html>
<style>
ol.cp {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
ol.cp li {
display: block;
margin-bottom: .5em;
margin-left: 2em;
}
ol.cp:before {
display: inline-block;
content: "C"counter(item)". ";
counter-increment: item;
width: 3em;
margin-left: -2em;
}
</style>
<body>
<h2>My Items</h2>
<p>
<ol reversed>
<li>item 10</li>
<li>item 9</li>
<li>item 8</li>
<li>item 7</li>
<li>item 6</li>
<li>item 5</li>
<li>item 4</li>
<li>item 3</li>
<li>item 2</li>
<li>item 1</li>
</ol>
</p>
<p>
<ol class="cp" reversed>
<li>item 10</li>
<li>item 9</li>
<li>item 8</li>
<li>item 7</li>
<li>item 6</li>
<li>item 5</li>
<li>item 4</li>
<li>item 3</li>
<li>item 2</li>
<li>item 1</li>
</ol>
</p>
</body>
</html>
The result of the above code is illustrated in the following picture.
The only solution I can come up with, with out using JS, is mostly a brute force solution. But if all of your lists are under 20 or 50... how ever many of these you feel like writing. You can match the length of the list and set the counter to that value then decrement the counter.
example for list of 10 items:
ol.cp {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
ol.cp li {
display: block;
margin-bottom: .5em;
margin-left: 2em;
}
ol.cp li:before {
display: inline-block;
content:"C"counter(item)". ";
counter-increment: item -1;
width: 3em;
margin-left: -2em;
}
ol.cp li:first-child:nth-last-child(10) {
counter-reset: item 11;
}
the problem is you need to create one for each length you want to match. Here are 1-10 and a sample - http://jsfiddle.net/Ue7dG/
ol.cp li:first-child:nth-last-child(1) {
counter-reset: item 2;
}
ol.cp li:first-child:nth-last-child(2) {
counter-reset: item 3;
}
ol.cp li:first-child:nth-last-child(3) {
counter-reset: item 4;
}
ol.cp li:first-child:nth-last-child(4) {
counter-reset: item 5;
}
ol.cp li:first-child:nth-last-child(5) {
counter-reset: item 6;
}
ol.cp li:first-child:nth-last-child(6) {
counter-reset: item 7;
}
ol.cp li:first-child:nth-last-child(7) {
counter-reset: item 8;
}
ol.cp li:first-child:nth-last-child(8) {
counter-reset: item 9;
}
ol.cp li:first-child:nth-last-child(9) {
counter-reset: item 10;
}
ol.cp li:first-child:nth-last-child(10) {
counter-reset: item 11;
}
As #durbnpoisn mentioned, you can use the reversed property. the order is controlled by the HTML and not by the CSS.
Also, notice that it's an HTML5 property.
For XHTML you will need javascript.
edit
The reverse is changing only the counter, not the content.
For content manipulation you must use javascript.
edit #2
Check this, but note that you must supply the upper bound for the list.
Change these lines:
ol{
counter-reset: item 3; /* set the upper boundry for the list, where to start the countdown */
}
/* note that i've changed it to li:before */
ol li:before{
counter-increment: item -1; /* negative counter */
}
To reverse the order of custom numbering, we need to know the total number of items in the list and instruct the counter to start from that number and then decrement.
From your example, with 10 numbers in the list, we'll tell the counter to start at 11.
ol.cp {
counter-reset: item 11;
margin-left: 0;
padding-left: 0;
}
And then set the counter to decrement by 1 on each item.
ol.cp:before {
display: inline-block;
content: "C"counter(item)". ";
counter-increment: item -1;
width: 3em;
margin-left: -2em;
}
When you create our list, reverse the order:
<ol reversed>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Related
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.
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>
How to increment ordered list with numbers and alphabet letters in CSS:
ol.nested {
margin-bottom: 0;
counter-reset: item;
}
ol.nested li {
display: block;
position: relative;
}
ol.nested li:before {
content: counters(item, ".", decimal) ".";
counter-increment: item;
position: absolute;
margin-right:100%;
right: 10px;
}
<ol class="nested">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ol class="nested">
<li>Show Item 3.a instead of 3.1</li>
<li>Show Item 3.b instead of 3.2</li>
<li>Show Item 3.c instead of 3.3</li>
</ol>
</li>
<li>Item 4
<ol class="nested">
<li>Show Item 4.a instead of 4.1</li>
<li>Show Item 4.b instead of 4.2</li>
<li>Show Item 4.c instead of 4.3</li>
</ol>
</li>
<li>Item 5</li>
</ol>
Is there a way to combine numbers with letters (2.a, 2.b, 2.c) and increment them in ordered list? With content and counters-increment the list will be incremented only with one type either decimal or lower-alpha. How to combine decimal with lower-alpha incrementing? Thank you!
you can use multiple counters with multiple counter-reset, and apply a counter-increment to ::before and ::after
.nested {
margin-bottom: 0;
counter-reset: number letter; /* default reset for number and letter */
}
.nested.third li {
counter-reset: number 2; /* reset all child li in order to keep 3.x */
}
.nested.fourth {
counter-reset: letter /* reset the letter to restart at A */
}
.nested.fourth li {
counter-reset: number 3; /* reset all child li in order to keep 4.x */
}
.nested li {
display: block;
position: relative;
}
.parent li::before {
content: counter(number)".";
counter-increment: number; /* increment the numbers in general */
position: absolute;
margin-right: 100%;
right: 20px;
background: lightgreen
}
.child li::after {
content: counter(letter, lower-alpha); /* increment the letters in general */
counter-increment: letter;
position: absolute;
margin-right: 100%;
right: 10px;
background: lightblue;
width: 10px
}
<ol class="nested parent">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ol class="nested child third">
<li>Show Item 3.a instead of 3.1</li>
<li>Show Item 3.b instead of 3.2</li>
<li>Show Item 3.c instead of 3.3</li>
</ol>
</li>
<li>Item 4
<ol class="nested child fourth">
<li>Show Item 4.a instead of 4.1</li>
<li>Show Item 4.b instead of 4.2</li>
<li>Show Item 4.c instead of 4.3</li>
</ol>
</li>
<li>Item 5</li>
</ol>
OP's comment
Sorry, you're right. The numbers are exactly as I asked. Is there no way to have generic css class for the next items 5, 6, 7 and
so on? Hm.
As #Mr Lister answered below you can do it, so I'm updating my answer to meet your specs.
As you can see by the colors, the difference from one snippet to another is that in the first one you have more control over each item, in this one is more general.
.nested li {
display: block;
position: relative;
}
.nested {
margin-bottom: 0;
counter-reset: number;
}
.parent .nested {
counter-reset: letter;
}
.parent .nested li::before {
content: counter(number) "." counter(letter, lower-alpha);
counter-increment: letter;
background: lightblue
}
.nested li::before {
content: counter(number) ".";
counter-increment: number;
position: absolute;
margin-right: 100%;
right: 10px;
background: lightgreen
}
<ol class="nested parent">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ol class="nested">
<li>Show Item 3.a instead of 3.1</li>
<li>Show Item 3.b instead of 3.2</li>
<li>Show Item 3.c instead of 3.3</li>
</ol>
</li>
<li>Item 4
<ol class="nested">
<li>Show Item 4.a instead of 4.1</li>
<li>Show Item 4.b instead of 4.2</li>
<li>Show Item 4.c instead of 4.3</li>
</ol>
</li>
<li>Item 5</li>
</ol>
Is this what you need? It doesn't rely on any specific class names for the different nested lists, so you can have as many lists as you want.
The trick is to use items for the outer list and subitems for the inner ones.
ol.nested {
margin-bottom: 0;
counter-reset: item;
}
ol.nested li {
display: block;
position: relative;
}
ol.nested li:before {
content: counters(item, ".", decimal) ".";
counter-increment: item;
position: absolute;
margin-right: 100%;
right: 10px;
}
.nested .nested {
counter-reset: subitem;
}
.nested .nested li:before {
content: counter(item) "." counter(subitem, lower-alpha);
counter-increment: subitem;
}
<ol class="nested">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ol class="nested">
<li>Show Item 3.a instead of 3.1</li>
<li>Show Item 3.b instead of 3.2</li>
<li>Show Item 3.c instead of 3.3</li>
</ol>
</li>
<li>Item 4
<ol class="nested">
<li>Show Item 4.a instead of 4.1</li>
<li>Show Item 4.b instead of 4.2</li>
<li>Show Item 4.c instead of 4.3</li>
</ol>
</li>
<li>Item 5</li>
</ol>
I would want to make a custom list type of Khmer Unicode Number ១ ២ ៣.. orderly. I tried to archive this by using css css pseudo li:nth-child(1) li:nth-child(2) li:nth-child(3).. as define in my stylesheet like this:
ul.mainList {
list-style-type: none;
}
ul.mainList > li {
text-indent: -5px;
}
ul.mainList > li:nth-child(1):before {
content: "១. ";
text-indent: -5px;
}
ul.mainList > li:nth-child(2):before {
content: "២. ";
text-indent: -5px;
}
ul.mainList > li:nth-child(3):before {
content: "៣. ";
text-indent: -5px;
}
ul.mainList > li:nth-child(4):before {
content: "៤. ";
text-indent: -5px;
}
ul.mainList > li:nth-child(5):before {
content: "៥. ";
text-indent: -5px;
}
ul.mainList > li:nth-child(6):before {
content: "៦. ";
text-indent: -5px;
}
ul.mainList > li:nth-child(7):before {
content: "៧. ";
text-indent: -5px;
}
ul.mainList > li:nth-child(8):before {
content: "៨. ";
text-indent: -5px;
}
My HTML markup is like so:
<p>List of items</p>
<ul class="mainList">
<li>Item ១</li>
<li>Item ២</li>
<li>Item ៣</li>
<li>Item ៤</li>
<li>Item ៥</li>
<li>Item ៦</li>
<li>Item ៧</li>
<li>Item ៨</li>
</ul>
It works just fine, however supposed if I had than ten or twenty list items, I would have to define ten or twenty li:nth-child(n) twenty times as well.
Any thought of a better way? Thanks
This is a not very known feature but the list-style CSS attribute can accept a very wide range of values (see docs). Including khmer! So you are in luck, the easiest way is to simply define the list-style of your ordered list...
ol.khmer {
list-style: khmer;
}
<p>List of items</p>
<ol class="khmer">
<li>Item ១</li>
<li>Item ២</li>
<li>Item ៣</li>
<li>Item ៤</li>
<li>Item ៥</li>
<li>Item ៦</li>
<li>Item ៧</li>
<li>Item ៨</li>
</ol>
I find important to note that it is not all browsers that support it, as stated by #Mr_Lister. The other option could be using #counter-style which is not supported much more... If all browsers should be supported, you'd have to stick to your solution.
I want to decrease the font size of each element with increasing number in list:
<ul>
<li>Number 1</li>
<li>Number 2</li>
<li>Number 3</li>
</ul>
Should result in something like
Number 1
Number 2
Number 3
where the first element has a font size of 25px, second has 20px, third has 15 px and so on.
Is there a way to do this with CSS only?
You could achieve this effect by add the following CSS to your style sheet:
li:nth-child(1) {
font-size: 25px;
}
li:nth-child(2) {
font-size: 20px;
}
li:nth-child(3) {
font-size: 15px;
}
li:nth-child(4) {
font-size: 10px;
}
li:nth-child(4) {
font-size: 5px;
}
As far as I know, there is no automated way of doing this in pure CSS. You would need to use JavaScript (or a JavaScript library like jQuery).
However, as the code sample above shows, the fifth LI element would be a font-size value of zero (which would render as invisible), and any after that would have a negative number for its value (which would be invalid).
You don't need Javascript for this solution, you can do it purely in CSS.
CSS
li {
font-size: 100%;
}
li:nth-child(1) {
font-size: 90%;
}
li:nth-child(2) {
font-size: 80%;
}
li:nth-child(3) {
font-size: 70%;
}
li:nth-child(4) {
font-size: 60%;
}
While this doesn't go infinitely deep, you mentioned that the max is 4, so this should be a good solution.
If you need to go infinitely deep, I suggest a JS solution, although the times when that is needed are few and far between.
Here is an example using JQuery, see example https://jsfiddle.net/kvb5hb6f/3/
This is setting the li font size starting at 25 and incriminating -5 then when the size hits 5 it does not go any smaller.
<ul id="numbers">
<li>Number 1</li>
<li>Number 2</li>
<li>Number 3</li>
<li>Number 4</li>
<li>Number 5</li>
<li>Number 6</li>
<li>Number 7</li>
<li>Number 8</li>
<li>Number 9</li>
</ul>
<script>
var listItems = $("#numbers li");
var fontHeight = 25;
listItems.each(function(idx, li) {
var product = $(li);
if (fontHeight >= 5) {
$(product).css("fontSize", fontHeight + "px");
fontHeight = fontHeight - 5;
} else {
fontHeight = 5;
$(product).css("fontSize", fontHeight + "px");
}
});
</script>
Classes can be used to changed the size, add a class to each li element and the CSS can be created to change the size accordingly.
<ul>
<li class="one">Number 1</li>
<li class="two">Number 2</li>
<li class="three">Number 3</li>
</ul>
This is a start: https://jsfiddle.net/he5gs4z0/2/
Related post: Can you use if/else conditions in CSS?
You can use the nth-child from css:
`<ul class='ultag'>
<li>Number 1</li>
<li>Number 2</li>
<li>Number 3</li>
</ul>
<style>
.ultag li:nth-child(1) { font-size: 25px; }
.ultag li:nth-child(2) { font-size: 20px; }
.ultag li:nth-child(3) { font-size: 15px; }
.ultag li:nth-child(4) { font-size: 10px; }
</style>
`
What I am trying to do is:
Assume that I have the following list:
Item 1
Item 2
Item 3
Item 4
I want to alternate between two colours so for example:
Item 1 (Blue)
Item 2 (Orange)
Item 3 (Blue)
Item 4 (Orange)
But I want this behaviour to be controlled in CSS so I can just write:
<ul>
<li>Item 1</li>
</ul>
Can anyone point me in the right direction to how I would achieve this?
You can use :nth-child pseudo class:
ul li:nth-child(2n+1) { color: blue; }
ul li:nth-child(2n) { color: orange; }
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
You can use CSS :nth-child
li { color: blue; }
li:nth-child(odd) { color: orange; }
JSFiddle Code