Since I have not found a post on StackOverflow that satisfies my needs for what I am trying to do, I have made a new question covering my problem.
I am trying to build an ordered list, where I want to have:
1.
1.1
A
B
C
1.2
1.3
Currently, I have the following:
1.
1.1
1.1.1
1.1.2
1.1.3
1.2
1.3
I have tried a few things without luck though, so I would appreciate if I can get some help.
Is this possible what I am trying to do? If yes, how? If no, why?
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
li:before {
content: counters(item, ".") ". ";
display: table-cell;
padding-right: 0.6em;
}
li li {
margin: 10px;
}
li li:before {
content: counters(item, ".") " ";
}
.bolder {
font-size: 1.17em;
font-weight: bolder;
margin: 0px;
}
.parent::before {
font-size: 1.17em;
font-weight: bolder;
}
<li class="parent">
<p class="bolder">How I want it to look like</p>
<ol>
<li>This is 1.1
<ol>
<li class="subItem">
This is what I want to be A
</li>
<li class="subItem">
This is what I want to be B
</li>
<li class="subItem">
This is what I want to be C
</li>
</ol>
</li>
<li>
Then it continues on with 1.2
</li>
<li>
Then 1.3.. etc.
</li>
</ol>
</li>
If you want to target the third level of lis you can use the ol ol ol li selector. To use uppercase letters, you can use a counter() instead of counters() as with counters() the generated text is the value of all counters while with counter() it's the value of the innermost counter only.
If you set the counter style to upper-alpha the markers will be uppercase letters.
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
li:before {
content: counters(item, ".") ". ";
display: table-cell;
padding-right: 0.6em;
}
li li {
margin: 10px;
}
li li:before {
content: counters(item, ".") " ";
}
.bolder {
font-size: 1.17em;
font-weight: bolder;
margin: 0px;
}
.parent::before {
font-size: 1.17em;
font-weight: bolder;
}
ol ol ol li:before {
content: counter(item, upper-alpha);
}
<ol>
<li class="parent">
<p class="bolder">How I want it to look like</p>
<ol>
<li>This is 1.1
<ol>
<li class="subItem">
This is what I want to be A
</li>
<li class="subItem">
This is what I want to be B
</li>
<li class="subItem">
This is what I want to be C
</li>
</ol>
</li>
<li>
Then it continues on with 1.2
</li>
<li>
Then 1.3.. etc.
<ol>
<li class="subItem">
This is what I want to be A
</li>
<li class="subItem">
This is what I want to be B
</li>
</ol>
</li>
</ol>
</li>
</ol>
I think the best way to approach this would be to assign a class to the list that you want to display the letter style then use list-style-type:upper-alpha in that class.
I'm trying to get a customized ordered list to work with paragraphs and other containers but I can't get the lists to behave the same as the default.
Specifically, I would like to have a customized list and paragraphed content that appears on the same line as the enumeration. Also, I'm looking for a solution that changes the list and not the paragraph. The paragraph is just an example of some generated content that I do not wish to alter.
.custom {
list-style-type: none;
counter-reset: elementcounter;
}
.custom li:before {
content: counter(elementcounter) ". ";
counter-increment: elementcounter;
}
.solution {
list-style-type: none;
counter-reset: elementcounter;
}
.solution li>p {
display: inline-block;
}
.solution li:before {
content: counter(elementcounter) ". ";
counter-increment: elementcounter;
}
<ol>
<li><p>Places nicely on the same line.</p></li>
<li><p>Places nicely on the same line.</p> <p>Places nicely on the same line.</p></li>
</ol>
<!-- Original problem
<ol class="custom">
<li><p>Places poorly on the second line.</p></li>
<li><p>Places poorly on the second line.</p> <p>Places nicely on the second line.</p></li>
</ol>
-->
<ol class="solution">
<li><p>Places poorly on the second line.</p></li>
<li><p>Places poorly on the second line.</p> <p>Places poorly on the same line.</p></li>
</ol>
As #Temani Afif mentioned, you could add inline-block to the p - like this:
.custom li > p {
display: inline-block;
margin: 2px; /* you can also adjust your margins/padding if you wish */
}
UPDATE
Based on the comments (and updated question) if you have multiple paragraphs on the same <li> then you can add different styles for the first p in the list and the rest of the ps on the list. Something along the lines of:
.custom li > p {
margin: 2px;
}
.custom li > p + p {
display: block;
margin: 0 1.1em;
list-style-type: none;
}
.custom li > p:first-of-type {
display: inline-block;
}
See demo code below..
Updated demo code based on comments
.custom {
list-style-type: none;
counter-reset: elementcounter;
}
.custom li:before {
content: counter(elementcounter) ". ";
counter-increment: elementcounter;
}
.custom li > p {
margin: 2px;
}
.custom li > p + p {
display: block;
margin: 0 1.1em;
list-style-type: none;
}
.custom li > p:first-of-type {
display: inline-block;
}
<ol>
<li>
<p>Places nicely on the same line.</p>
</li>
<li>
<p>Places nicely on the same line.</p>
</li>
</ol>
<ol class="custom">
<li><p>Places poorly on the second line.</p></li>
<li><p>Places poorly on the second line.</p> <p>Places poorly on the same line.</p></li>
<li><p>Places poorly on the second line.</p></li>
<li><p>Places poorly on the second line.</p> <p>Places poorly on the same line.</p></li>
</ol>
I need to put some legal text on our website (Terms & Conditions), and the legal guys have made it so that there are 2 levels of incrementation. Not a huge problem, I have found some CSS that does the trick well.
However, the issue is that the 3rd level of incrementation is not 1.1.1 but a, so a different type. And I cannot find a way to achieve that using CSS.
An extra complication is that in yet another paragraph, they use yet another type for the third level: i, ii, iii.
The code I use is below. Any idead on how to achieve this?
<!DOCTYPE html>
<html>
<head>
<style>
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
ol > li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
ol > li:before {
content: counters(item, ".") ". ";
display: table-cell;
padding-right: 0.6em;
}
li ol > li {
margin: 0;
}
li ol > li:before {
content: counters(item, ".") " ";
}
</style>
</head>
<body>
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item
<ol>
<li>this needs to be a</li>
<li>this needs to be b</li>
<li>this needs to be c</li>
</ol>
</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>
</body>
</html>
OK, I figured it out, thanks to the pointer about the classes from Mr Lister.
The trick was two-fold:
Add specific selector to the CSS to only select the 3rd level of the list
Add 2 classes, one for the lower-alpha and one for lower-roman
Full code below.
<!DOCTYPE html>
<html>
<head>
<style>
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
ol > li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
ol > li:before {
content: counters(item, ".") ".";
display: table-cell;
padding-right: 0.6em;
}
li ol > li {
margin: 0;
}
li ol > li {
margin: 0;
}
li ol > li:before {
content: counters(item, ".") " ";
}
li ol li ol.alpha> li:before {
content: counter(item, lower-alpha)".";
}
li ol li ol.roman> li:before {
content: counter(item, lower-roman)".";
}
</style>
</head>
<body>
<ol>
<li>item</li>
<li>item
<ol>
<li>item
<ol class="alpha">
<li>this needs to be a</li>
<li>this needs to be b</li>
<li>this needs to be c</li>
</ol>
</li>
<li>item</li>
<li>item
<ol class = "roman">
<li>this needs to be i</li>
<li>this needs to be ii</li>
<li>this needs to be iii</li>
</ol>
</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>
</body>
</html>
Thanks for putting me in the right direction!
I want to increase the size of the number in OL without increasing the font size of the text of the content.
What is wrong with this and how to correct it:
<ol style="font-size:5em">
<li style="font-size:1em">Hello </li>
</ol>
All I want is big number 1 with font-size of 5em with 1em text size of the content Hello.
Also I need to use only inline style.
The numbers of the li elements are formatted according to the CSS rules for the li elements themselves; therefore to style the numbers differently to the text you have to wrap the text itself into another element (in this case a span):
<ol>
<li><span>list element one</span></li>
<li><span>list element two</span></li>
</ol>
CSS:
li {
list-style: decimal-leading-zero;
font-size: 5em;
margin: 0 0 0 2em;
}
li span {
font-size: 0.25em;
}
li {
list-style: decimal-leading-zero;
font-size: 5em;
margin: 0 0 0 2em;
}
li span {
font-size: 0.25em;
}
<ol>
<li><span>list element one</span>
</li>
<li><span>list element two</span>
</li>
</ol>
JS Fiddle demo.
If you're able to sacrifice certain older browsers that can't handle generated content, then you could use, instead:
<ol>
<li>list element one</li>
<li>list element two</li>
</ol>
and:
ol {
counter-reset: listNumbering;
}
li {
font-size: 1em;
counter-increment: listNumbering;
}
li:before {
content: counter(listNumbering,decimal-leading-zero) '.';
font-size: 5em;
}
ol {
list-style-type: none;
counter-reset: listNumbering;
}
li {
font-size: 1em;
counter-increment: listNumbering;
}
li:before {
content: counter(listNumbering, decimal-leading-zero)'.';
font-size: 5em;
}
<ol>
<li>list element one</li>
<li>list element two</li>
</ol>
JS Fiddle demo.
Revisiting this answer, it seems that the ::marker pseudo-element is beginning to be more widely adopted (albeit behind flags in Chrome and Edge 80+, as of writing). This means it may be a better option than the above in the relatively near future:
li {
/* something of a magic number to position the ::marker
on the page: */
margin-left: 2em;
}
/* the generated list-marker for the <li> element: */
li::marker {
color: #f90;
font-size: 5em;
}
Please note that the below snippet – and the above CSS – requires a compatible browser, some browsers such as Chrome, Chromium and Edge in versions 80 and above require that enable-experimental-web-platform-features flag be enabled, whereas in Firefox 68+ it should work).
li {
margin-left: 2em;
}
::marker {
color: #f90;
font-size: 5em;
}
<ol>
<li>list element one</li>
<li>list element two</li>
</ol>
JS Fiddle demo.
References:
counter().
counter-increment.
counter-reset.
::marker pseudo-element (compatibility).
You can use the CSS pseudo-element ::marker. (Demo snippet below.)
ol li::marker {
font-size: 2em;
}
ol li::marker {
font-size: 2em;
color: red;
}
<ol>
<li>Hello</li>
</ol>
See this tutorial.
ol {
font: 5em;
}
ol p {
font: 1em;
}
Try something like this:
<ol>
<li style="font-size: 3em"><span style="font-size: .5em">Hello</span></li>
</ol>
Can an ordered list produce results that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with CSS? So far, using list-style-type:decimal has produced only 1, 2, 3, not 1.1, 1.2., 1.3.
You can use counters to do so:
The following style sheet numbers nested list items as "1", "1.1", "1.1.1", etc.
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }
Example
ol { counter-reset: item }
li{ display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }
<ol>
<li>li element
<ol>
<li>sub li element</li>
<li>sub li element</li>
<li>sub li element</li>
</ol>
</li>
<li>li element</li>
<li>li element
<ol>
<li>sub li element</li>
<li>sub li element</li>
<li>sub li element</li>
</ol>
</li>
</ol>
See Nested counters and scope for more information.
None of solutions on this page works correctly and universally for all levels and long (wrapped) paragraphs. It’s really tricky to achieve a consistent indentation due to variable size of marker (1., 1.2, 1.10, 1.10.5, …); it can’t be just “faked,” not even with a precomputed margin/padding for each possible indentation level.
I finally figured out a solution that actually works and doesn’t need any JavaScript.
It’s tested on Firefox 32, Chromium 37, IE 9 and Android Browser. Doesn't work on IE 7 and previous.
CSS:
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
ol > li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
ol > li:before {
content: counters(item, ".") ". ";
display: table-cell;
padding-right: 0.6em;
}
li ol > li {
margin: 0;
}
li ol > li:before {
content: counters(item, ".") " ";
}
Example:
Try it on JSFiddle, fork it on Gist.
The chosen answer is a great start, but it essentially forces list-style-position: inside; styling on the list items, making wrapped text hard to read. Here's a simple workaround that also gives control over the margin between the number and text, and right-aligns the number as per the default behaviour.
ol {
counter-reset: item;
}
ol li {
display: block;
position: relative;
}
ol li:before {
content: counters(item, ".")".";
counter-increment: item;
position: absolute;
margin-right: 100%;
right: 10px; /* space between number and text */
}
JSFiddle: http://jsfiddle.net/3J4Bu/
The solutions posted here did not work well for me, so I did a mixture of the ones of this question and the following question: Is it possible to create multi-level ordered list in HTML?
/* Numbered lists like 1, 1.1, 2.2.1... */
ol li {display:block;} /* hide original list counter */
ol > li:first-child {counter-reset: item;} /* reset counter */
ol > li {counter-increment: item; position: relative;} /* increment counter */
ol > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;} /* print counter */
Result:
Note: the screenshot, if you wish to see the source code or whatever is from this post: http://estiloasertivo.blogspot.com.es/2014/08/introduccion-running-lean-y-lean.html
Note: Use CSS counters to create nested numbering in a modern browser. See the accepted answer. The following is for historical interest only.
If the browser supports content and counter,
.foo {
counter-reset: foo;
}
.foo li {
list-style-type: none;
}
.foo li::before {
counter-increment: foo;
content: "1." counter(foo) " ";
}
<ol class="foo">
<li>uno</li>
<li>dos</li>
<li>tres</li>
<li>cuatro</li>
</ol>
In the near future you may be able to use the ::marker psuedo-element to achieve the same result as other solutions in just one line of code.
Remember to check the Browser Compatibility Table as this is still an experimental technology.
At the moment of writing only Firefox and Firefox for Android, starting from version 68, support this.
Here is a snippet that will render correctly if tried in a compatible browser:
::marker { content: counters(list-item,'.') ':' }
li { padding-left: 0.5em }
<ol>
<li>li element
<ol>
<li>sub li element</li>
<li>sub li element</li>
<li>sub li element</li>
</ol>
</li>
<li>li element</li>
<li>li element
<ol>
<li>sub li element</li>
<li>sub li element</li>
<li>sub li element</li>
</ol>
</li>
</ol>
You may also want to check out this great article by smashingmagazine on the topic.
The following worked for me:
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
ol > li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
ol > li:before {
content: counters(item, ".") ") ";
display: table-cell;
padding-right: 0.6em;
}
li ol > li {
margin: 0;
}
li ol > li:before {
content: counters(item, ".") ") ";
}
Look at: http://jsfiddle.net/rLebz84u/2/
or this one http://jsfiddle.net/rLebz84u/3/
with more and justified text
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Sandro Alvares - KingRider">
</head>
<body>
<style type="text/css">
li.title {
font-size: 20px;
font-weight: lighter;
padding: 15px;
counter-increment: ordem;
}
.foo {
counter-reset: foo;
padding-left: 15px;
}
.foo li {
list-style-type: none;
}
.foo li:before {
counter-increment: foo;
content: counter(ordem) "." counter(foo) " ";
}
</style>
<ol>
<li class="title">TITLE ONE</li>
<ol class="foo">
<li>text 1 one</li>
<li>text 1 two</li>
<li>text 1 three</li>
<li>text 1 four</li>
</ol>
<li class="title">TITLE TWO</li>
<ol class="foo">
<li>text 2 one</li>
<li>text 2 two</li>
<li>text 2 three</li>
<li>text 2 four</li>
</ol>
<li class="title">TITLE THREE</li>
<ol class="foo">
<li>text 3 one</li>
<li>text 3 two</li>
<li>text 3 three</li>
<li>text 3 four</li>
</ol>
</ol>
</body>
</html>
Result:
http://i.stack.imgur.com/78bN8.jpg
I have some problem when there are two lists and second one is inside DIV
Second list should start at 1. not 2.1
<ol>
<li>lorem</li>
<li>lorem ipsum</li>
</ol>
<div>
<ol>
<li>lorem (should be 1.)</li>
<li>lorem ipsum ( should be 2.)</li>
</ol>
</div>
http://jsfiddle.net/3J4Bu/364/
EDIT:
I solved the problem by this
http://jsfiddle.net/hy5f6161/
this is proper code if you want to first child li resize of other css.
<style>
li.title {
font-size: 20px;
counter-increment: ordem;
color:#0080B0;
}
.my_ol_class {
counter-reset: my_ol_class;
padding-left: 30px !important;
}
.my_ol_class li {
display: block;
position: relative;
}
.my_ol_class li:before {
counter-increment: my_ol_class;
content: counter(ordem) "." counter(my_ol_class) " ";
position: absolute;
margin-right: 100%;
right: 10px; /* space between number and text */
}
li.title ol li{
font-size: 15px;
color:#5E5E5E;
}
</style>
in html file.
<ol>
<li class="title"> <p class="page-header list_title">Acceptance of Terms. </p>
<ol class="my_ol_class">
<li>
<p>
my text 1.
</p>
</li>
<li>
<p>
my text 2.
</p>
</li>
</ol>
</li>
</ol>
I was after adding numbered list to Python Markdown's TOC Extension.
I did something like this:
.toc ul { counter-reset: outItem; list-style: none }
.toc ul > li{ counter-reset: nestedItem }
.toc ul > li:before { content: counters(outItem, ".") ". "; counter-increment: outItem; margin-left: -2em; }
I am not sure it is the correct way, but it worked for me.
I needed to add this to the solution posted in 12 as I was using a list with a mixture of ordered list and unordered lists components. content: no-close-quote seems like an odd thing to add I know, but it works...
ol ul li:before {
content: no-close-quote;
counter-increment: none;
display: list-item;
margin-right: 100%;
position: absolute;
right: 10px;
}