Current result:
1. Item
1.1 Subitem
1.2 Subitem2
1.2.1 something more
1.2.2 another point
Desired result:
1. Item
1.1 Subitem
1.2 Subitem2
a. something more
b. another point
How do I modify my code to get the third level as letters instead of 3 numbers. I added the type="a" to the correct <ol> element in the HTML but it got overwritten.
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;
}
<ol>
<li>
<b>
Our rights if you breach this policy
</b>
<ol>
<li>
We will decide whether there has been a breach of this policy by you.
</li>
<li>
If we decide that you are in breach of any part of this policy, we may:
<ol type="a">
<li>
issue a warning to you;
</li>
<li>
immediately stop your right to use our Service;
</li>
<li>
take legal action against you to recover any of our losses caused by your breach; or
</li>
<li>
notify law enforcement authorities if we decide that you have broken any law; or
</li>
<li>
take any other action that we think is appropriate.
</li>
</ol>
</li>
</ol>
</li>
</ol>
You can use list-style-type: lower-alpha; and cancel out your counters with the :not() pseudo class:
At the end of your stylesheet create a rule that targets your type="a" and assigns the list style type you want (lower-alpha).
Your counters will override this declaration so an easy solution is to only apply them to <ol> elements that are :not([type="a"]) (Not one of your alpha lists).
Hopefully this works for you:
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
ol:not([type="a"]) > li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
ol:not([type="a"]) > li::before {
content: counters(item, ".");
display: table-cell;
padding-right: 0.6em;
}
ol[type="a"] {
list-style-type: lower-alpha;
}
<ol>
<li>
<b>
Our rights if you breach this policy
</b>
<ol>
<li>
We will decide whether there has been a breach of this policy by you.
</li>
<li>
If we decide that you are in breach of any part of this policy, we may:
<ol type="a">
<li>
issue a warning to you;
</li>
<li>
immediately stop your right to use our Service;
</li>
<li>
take legal action against you to recover any of our losses caused by your breach; or
</li>
<li>
notify law enforcement authorities if we decide that you have broken any law; or
</li>
<li>
take any other action that we think is appropriate.
</li>
</ol>
</li>
</ol>
</li>
</ol>
Related
I use the following css to generate nested numeration in ol:
ol{
counter-reset: item;
}
ol li{
display: block;
}
ol li:before{
content: counters(item, ".")". ";
counter-increment: item;
float: left;
margin-right: 5px;
}
On some level of nesting I want to reset the nesting. How can I achieve it?
For example,
<ol>
<li>
<ol>
<li>
<ol>
<li>
<ol class="reset">
<li>
<ol>
<li></li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
</ol>
Gives the following:
1.
1.1
1.1.1
1.1.1.1
1.1.1.1.1
But I want such structure
1.
1.1
1.1.1
1 # reset here
1.1
I have a site which lists the line of succession to the British crown. As the line of succession is an ordered list, the main part of the site is in an <ol>.
However, there's a wrinkle. People occasionally drop out of the line of succession (most commonly for marrying a Catholic). For example, see Prince Michael of Kent is listed as 16th in line on 1978-06-29, but the next day he has vanished from the list as he married a Catholic on that date.
Currently, as you see, I just drop people from the list when they are excluded from the succession. But actually, I'd like to include them, but use a "dimmed" typeface for their entries in the list. But that gives me another problem. I can then no longer use an ordered list as excluded people don't have a position in the succession. So I need to omit the number from some items in an ordered list.
So I'm looking for the best approach to simulate an ordered list, but with the ability to omit the numbers on some list items. I have a few ideas:
Switch to a <ul> and add my own numbers. Can I style it to remove the bullets and outdent the numbers?
Switch to just using outdented paragraphs.
Use a table with a very narrow first column.
But I wonder if there's a CSS and/or HTML trick that I'm missing. Is there any easier way to achieve what I'm looking for?
Update: The current HTML looks like this:
<ol>
<li itemscope itemtype="http://schema.org/Person"><span itemprop="name">The Prince Charles, Prince of Wales</span>
<br><span class="small">Age 69
(born <a title="Line of Succession on 14 November 1948" href="/1948-11-14">14 November 1948</a>),
<br>Son of the sovereign</span></li>
<li itemscope itemtype="http://schema.org/Person"><span itemprop="name">Prince William, Duke of Cambridge</span>
<br><span class="small">Age 35
(born <a title="Line of Succession on 21 June 1982" href="/1982-06-21">21 June 1982</a>),
<br>Grandson of the sovereign</span></li>
<li itemscope itemtype="http://schema.org/Person"><span itemprop="name">Prince George of Cambridge</span>
<br><span class="small">Age 4
(born <a title="Line of Succession on 22 July 2013" href="/2013-07-22">22 July 2013</a>),
<br>Great grandson of the sovereign</span></li>
<li itemscope itemtype="http://schema.org/Person"><span itemprop="name">Princess Charlotte of Cambridge</span>
<br><span class="small">Age 2
(born <a title="Line of Succession on 02 May 2015" href="/2015-05-02">02 May 2015</a>),
<br>Great granddaughter of the sovereign</span></li>
...
</ol>
The CSS is all standard Bootstrap 4.0. Oh, except this bit:
span.small {
font-size: 75%;
}
You can use css counters. Also you have to add a class to the omitted element.
Stack Snippet
ul {
font: 13px Verdana;
list-style: none;
counter-reset: list;
padding: 0;
}
ul>li:not(.disable):before {
counter-increment: list;
content: counter(list) ": ";
position: absolute;
left: 0;
}
ul>li {
position: relative;
padding-left: 20px;
}
ul>li.disable {
opacity: .5;
}
<ul>
<li>Text</li>
<li>Text</li>
<li class="disable">Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ul>
You could use css counters
ol {
counter-reset: item;
list-style: none;
margin: 0;
padding: 0;
}
ol li {
display: block;
padding: 0 0 0 2.5em;
margin: 0;
position: relative;
}
ol .counted:before {
content: counters(item, ".") " ";
counter-increment: item;
position: absolute;
left: 0;
top: 0;
display: inline-block;
width: 2.5em;
}
ol .level1>li {
margin: 0;
padding-left: 0;
}
ol .level1>.counted:before {
left: -2.5em;
font-weight: normal;
}
ol .level2>.list-item {
padding-left: 2.5em;
}
ol .level2>.list-item:before {
left: -1em;
width: 3.5em;
}
.not-counted {color:green;}
<ol>
<li class="counted">
this is counted
<ol class="level1">
<li class="counted">
this is counted
</li>
<li class="not-counted">
this is not counted
</li>
<li class="counted">
this is counted
<ol class="level2">
<li class="counted">
this is counted
</li>
<li class="not-counted">
this is not counted
</li>
<li class="counted">
this is counted
</li>
</ol>
</li>
</ol>
</li>
<li class="not-counted">
this is not counted
</li>
<li class="counted">
this is counted
</li>
</ol>
I'm struggling to find a way in the CSS that I have...
https://jsfiddle.net/Lh0kLvj7/
ol.content {
counter-reset: item 1;
list-style: none;
}
li.content:before {
counter-increment: item;
content: counter(item)". ";
}
ol.content ol.content li.content:before {
counter-increment: item;
content: counters(item, ".") " ";
}
<p><span style="font-size: 24px;">On this page:</span></p>
<ol class="content">
<li class="content">section TWO
<ol class="content">
<li class="content">TWO point *ONE* (not 2.2!)</li>
<li class="content">TWO point *TWO*</li>
<li class="content">TWO point *THREE*</li>
<li class="content">TWO point *FOUR*
<ol class="content">
<li class="content">TWO point *FOUR* point *ONE* (not 2.5.2!)</li>
<li class="content">Title...</li>
<li class="content">Title...</li>
<li class="content">Title...</li>
<li class="content">Title...</li>
</ol>
</li>
<li class="content">TWO point *FIVE*</li>
</ol>
</li>
</ol>
...to first start a parent counter sequence at a number that is not one (i.e., section 2 in the fiddle above), but have the nested lists actually start at .1. I'm not great at CSS so it may be something simple that I'm missing. In the fiddle above you'll see that the HTML displays incorrectly...
2.
2.2
2.3
2.4
2.5
2.5.2
when I need...
2.
2.1
2.3
2.4
2.4.1
I definitely need to be able to start at any number for the initial/parent so I'm assuming I will have to use counter-reset: item 1;, counter-reset: item 2;, counter-reset: item 4;, etc. somewhere, but then I need to start nested lists should be reset to start at 1.
You're resetting your counter to 1:
ol.content {
counter-reset: item 1;
list-style: none;
}
If you reset it to 0 for nested lists it works as intended:
ol.content ol.content {
counter-reset: item 0;
}
https://jsfiddle.net/Lh0kLvj7/3/
You can re-assign the counter-reset for the second level menu like below.
ol.content ol.content {
counter-reset: item;
list-style: none;
}
Code Snippet
ol.content {
counter-reset: item 1;
list-style: none;
}
li.content:before {
counter-increment: item;
content: counter(item)". ";
}
ol.content ol.content {
counter-reset: item;
list-style: none;
}
ol.content ol.content li.content:before {
counter-increment: item;
content: counters(item, ".") " ";
}
<p><span style="font-size: 24px;">On this page:</span></p>
<ol class="content">
<li class="content">section TWO
<ol class="content">
<li class="content">TWO point *ONE* (not 2.2!)</li>
<li class="content">TWO point *TWO*</li>
<li class="content">TWO point *THREE*</li>
<li class="content">TWO point *FOUR*
<ol class="content">
<li class="content">TWO point *FOUR* point *ONE* (not 2.5.2!)</li>
<li class="content">Title...</li>
<li class="content">Title...</li>
<li class="content">Title...</li>
<li class="content">Title...</li>
</ol>
</li>
<li class="content">TWO point *FIVE*</li>
</ol>
</li>
</ol>
Not sure why are you using ".content" classes everywhere... but anyway, easiest approach would be to use order classes on the OL tags
ol {
list-style: none;
}
.f-o{
counter-reset: f-o 1;
/*initialized at 1 for demonstration purposes, you might want to start from zero*/
}
.s-o{
counter-reset: s-o;
}
.t-o{
counter-reset:t-o;
}
.f-o li:before {
content: counter(f-o)". ";
counter-increment: f-o;
}
.s-o li:before {
content: counter(f-o) "." counter(s-o)". ";
counter-increment: s-o;
}
.t-o li:before {
content: counter(f-o) "." counter(s-o)". " counter(t-o)". ";
counter-increment: t-o;
}
<ol class="f-o">
<li>section TWO
<ol class="s-o">
<li>TWO point *ONE* (not 2.2!)</li>
<li>TWO point *TWO*</li>
<li>TWO point *THREE*</li>
<li>TWO point *FOUR*
<ol class="t-o">
<li>TWO point *FOUR* point *ONE* (not 2.5.2!)</li>
<li>Title...</li>
<li>Title...</li>
<li>Title...</li>
<li>Title...</li>
</ol>
</li>
<li>TWO point *FIVE*</li>
</ol>
</li>
</ol>
and attach the resets to them
The solution is to use counter-reset property.
ol.content ol.content {
counter-reset: item 0;
}
The counter-reset property is specified as either one of the following:
A custom-ident naming the counter, followed optionally by an integer. You may specify as many counters to reset as you want, with each name or name-number pair separated by a space.
The keyword value none.
Visit https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
I'm trying to get a nested list to change from numbers to alphabetical. You can see JsFiddle where I have the class alpha I would like the 3.1.1 to change to a. Any ideas?
strong {
font-weight: 700;
}
.maincontent ol {
margin: 25px;
}
ol.tc li ol.d {
list-style-type: lower-alpha !important;
color: red;}
ol.tc {
counter-reset: item;
}
ol.tc li {
display: block;
position: relative;
}
ol.tc li:before {
content: counters(item, ".")".";
counter-increment: item;
position: absolute;
margin-right: 100%;
right: 10px; /* space between number and text */
}
ol.tc {
counter-reset: item;
}
ol.tc li:before {
content: counters(item, ".")".";
counter-increment: item;
position: absolute;
margin-right: 100%;
right: 10px; /* space between number and text */
}
ol.alpha {
counter-reset: item;
list-style-type: lower-alpha;
}
ol.alpha li:before {
list-style-type: lower-alpha;
position: absolute;
margin-right: 100%;
right: 10px; /* space between number and text */
color: pink;
}
<ol class="tc">
<ul>
<li><strong>Preconditions</strong><br>
<ol class="tc">
<li>Before we can provide you with Pay Monthly Services, you will need to:</li>
<li>Complete our application process and provide us with any information which we reasonably ask for.</li>
<li>Have a credit score and provide us with inancial security which is satisfactory to us. </li>
<li>Provide us with valid proof of identity and evidence that you are permanently living in the Republic of Ireland.
<li>Provide us with valid proof that you are aged over 18 years. </li>
</ol>
</li>
<li><strong>Tariff Limits</strong><br>
<ol class="tc">
<li>Tariffs may include a limit on the volume of Services, including minutes, texts and/or internet access, which can be used without extra charge. Charges for all Services in excess of any Tariff limits will be charged at the rates set out in the charges.</li>
</ol>
</li>
<li><strong>Call Charges covered by Tariff limits</strong><br>
<ol class="tc">
<li>Tariff limits cover calls made in Ireland to:
<ol>
<ol class="alpha">
<li>standard Irish landlines; and</li>
<li>08 numbers allocated to Irish mobile network operators.</li>
</ol>
</li>
</ul>
</ol>
html markup not valid
<ol class="tc">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</ol>
see answer below
strong {
font-weight: 700;
}
.maincontent ol {
margin: 25px;
}
ol.tc li ol.d {
list-style-type: lower-alpha !important;
color: red;}
ol.tc {
counter-reset: item;
}
ol.tc li {
display: block;
position: relative;
}
ol.tc li:before {
content: counters(item, ".")".";
counter-increment: item;
position: absolute;
margin-right: 100%;
right: 10px; /* space between number and text */
}
ol.tc {
counter-reset: item;
}
ol.tc li:before {
content: counters(item, ".")".";
counter-increment: item;
position: absolute;
margin-right: 100%;
right: 10px; /* space between number and text */
}
ol.alpha {
counter-reset: item;
}
ol.alpha li:before {
content: counter(item, lower-alpha) ". ";
counter-increment: item;
position: absolute;
margin-right: 100%;
right: 10px;
color: pink;
}
<ol class="tc">
<li><strong>Preconditions</strong>
<br/>
<ol class="tc">
<li>Before we can provide you with Pay Monthly Services, you will need to:</li>
<li>Complete our application process and provide us with any information which we reasonably ask for.</li>
<li>Have a credit score and provide us with inancial security which is satisfactory to us.</li>
<li>Provide us with valid proof of identity and evidence that you are permanently living in the Republic of Ireland.</li>
<li>Provide us with valid proof that you are aged over 18 years.</li>
</ol>
</li>
<li><strong>Tariff Limits</strong>
<br/>
<ol class="tc">
<li>Tariffs may include a limit on the volume of Services, including minutes, texts and/or internet access, which can be used without extra charge. Charges for all Services in excess of any Tariff limits will be charged at the rates set out in the charges.</li>
</ol>
</li>
<li><strong>Call Charges covered by Tariff limits</strong>
<br/>
<ol class="tc">
<li>Tariff limits cover calls made in Ireland to:
<ol class="alpha">
<li>standard Irish landlines; and</li>
<li>08 numbers allocated to Irish mobile network operators.</li>
</ol>
</li>
</ol>
The following would be an example for what you are trying to achieve:
<ol type="1">
<li> Decide on a subject.
<ol type="a">
<li> Business
<li> Family
<li> Hobby
</ol>
<li> Acquire the necessary tools and materials.
<ol type="a">
<li> Web browser
<li> Text editor or HTML editor
<li> Graphics and clip-art
<li> Graphics editor
</ol>
<li> Write the HTML source code.
</ol>
Just try it inside JFiddle without CSS code and change it to your wish.
The HTML you have is not valid, the only permitted content for <ol> and <ul> is zero or <li> elements.
For the alphabetical style, you will need the correct pseudo content for it.
.alpha li:before {
content: counter(item, lower-alpha)".";
}
See the update demo please - http://jsfiddle.net/sjqvpuuL/
ol {
counter-reset: item;
}
li {
display: block;
position: relative;
}
li:before {
content: counters(item, ".")".";
counter-increment: item;
position: absolute;
margin-right: 100%;
right: 10px;
}
.alpha li:before {
content: counter(item, lower-alpha)".";
}
<ol>
<li>
<strong>Preconditions</strong>
<ol>
<li>Before we can provide you with Pay Monthly Services, you will need to:</li>
<li>Complete our application process and provide us with any information which we reasonably ask for.</li>
<li>Have a credit score and provide us with inancial security which is satisfactory to us.</li>
<li>Provide us with valid proof of identity and evidence that you are permanently living in the Republic of Ireland.</li>
<li>Provide us with valid proof that you are aged over 18 years.</li>
</ol>
</li>
<li>
<strong>Tariff Limits</strong>
<ol>
<li>Tariffs may include a limit on the volume of Services, including minutes, texts and/or internet access, which can be used without extra charge. Charges for all Services in excess of any Tariff limits will be charged at the rates set out in the charges.</li>
</ol>
</li>
<li>
<strong>Call Charges covered by Tariff limits</strong>
<ol>
<li>Tariff limits cover calls made in Ireland to:
<ol class="alpha">
<li>standard Irish landlines; and</li>
<li>08 numbers allocated to Irish mobile network operators.</li>
</ol>
</li>
</ol>
</li>
</ol>
I want to create HTML nested lists that has the following format:
1
1.1
1.2
1.3
1.4
2
2.1
I tried a solution that I found on the internet:
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }
But it didnt work for me.
Any help please??
If the counter solution is too complicated, is there a way to fake the nested list effect, by writing them manually but being sure that the formatting looks like a real list
EDIT
need full IE6 support
this answer is for the first question. I suggest use this method if you are not going below IE8 (IE7 => ?). for below IE7 you can use same logic with jquery.
Original Post from
http://www.w3schools.com/cssref/pr_gen_counter-reset.asp
CSS
ul.numeric-decimals { counter-reset:section; list-style-type:none; }
ul.numeric-decimals li { list-style-type:none; }
ul.numeric-decimals li ul { counter-reset:subsection; }
ul.numeric-decimals li:before{
counter-increment:section;
content:counter(section) ". ";/*content:"Section " counter(section) ". ";*/
}
ul.numeric-decimals li ul li:before {
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}
HTML
<ul class="numeric-decimals">
<li>Cats</li>
<li>Dogs
<ul>
<li>Birds</li>
<li>Rats</li>
</ul>
</li>
<li>Rabbits</li>
<li>Ants
<ul>
<li>Lions</li>
<li>Rats</li>
</ul>
</li>
<li>Ducks</li>
This should work. It is a bad way to do this but if you MUST support IE6 not much choice.
<ol>
<li><span>1</span> Item
<ol>
<li><span>1.1</span> Item</li>
<li><span>1.2</span> Item</li>
<li><span>1.3</span> Item</li>
<li><span>1.4</span> Item</li>
</ol>
</li>
<li><span>2</span> Item
<ol>
<li><span>2.1</span> Item</li>
</ol>
</li>
</ol>
with css
ol {list-style:none;}
After your comment I've redone it a bit.
<ol>
<li><span>1</span> Item
<ol>
<li><span>1.1</span> <p>ItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem</p></li>
<li><span>1.2</span> <p>ItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem</p></li>
<li><span>1.3</span> <p>ItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem</p></li>
<li><span>1.4</span> <p>Item</p></li>
</ol>
</li>
<li><span>2</span> Item
<ol>
<li><span>2.1</span> Item</li>
</ol>
</li>
</ol>
And the css would be
ol {list-style:none;}
ol li span
{
display: block;
float: left;
width: 30px;
}
ol li
{
clear:both;
width: 400px;
}
ol li p
{
float: left;
width: 370px;
margin: 0;
}
You may have to adjust the widths.
You can use counters to do so:
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>
The before element doesn't work in IE6, but it's the correct way of doing it. I'd recommend using IE7.js, a javascript library that makes IE6 behave like IE7 where javascript and CSS are concerned. Another way could be using a javascript hack that runs only if the browser is IE6 and traverses de DOM modifying the list items...
In For A Beautiful Web you can find more information regarding IE6-compatible websites.
Works perfectly for me, in FF 3.6.6, so:
Which browser is it not working in?
What does your markup look like (i.e. are you nesting the lists correctly)?
This example uses IE6-specific CSS attribute behavior to add a static marker before each li. There must be some MS specific magic that can replace a static dash with a counter.
If you want it to be a CSS solution, use this as a starting point and then google "MSDN".
ul.example { margin: 0.5em 0; padding: 0 0 0 2em; }
ul.example li
{
margin: 0.5em 0; padding: 0 0 0 20px;
list-style-type: none;
behavior: expression( !this.before
? this.before = this.innerHTML = '— ' + this.innerHTML : '' );
text-indent: -1.24em;
}
ul.example li:before { content: '\2014\a0'; }