I have a very simple list
<ol>
<li>item 1</li>
<li>item 2</li>
</ol>
I need to start each list with Step X:. I can of course just manually write that out, but I would prefer if it were built automatically by the CSS. Something like:
ol li:before {
content: "Step $";
}
... where it can acquire the list position and insert it to $. Ideally it would also appear like this:
Step X
Content for step. No extra line break above this line
...but what I need more than anything else is "Step X" to have the correct content.
Counters in CSS2.1:
ol {
counter-reset: step;
}
ol li:before {
counter-increment: step;
content: "Step " counter(step);
/* You may need to add : and/or space, e.g. "Step " counter(step) ": "; */
}
Decent browser support (IE8+ and all other major browsers), and you can still style the :before pseudo-element (the Step X text) separately. No line break will be present unless you display as a block as :before and :after pseudo-elements display inline by default.
Do you mean a counter?
Like this?
Step 1 bla bla bla
Step 2 bla bla bla
If that's so...
<body>
<ol>
<li></li>
<li></li>
</ol>
</body>
And CSS:
body
{
counter-reset: stepx;
}
li:before
{
counter-increment: stepx;
content: "Step "counter(stepx);
}
IE8 supports these properties only if a !DOCTYPE is specified.
Related
I'll preface this question by saying I know this question has been asked before, but all the answers I can find for these appear to reference an obsolete solution that no longer works (At least in Firefox 56 [64 bit])
The obsolete method is that there used to be an automatically instantiated CSS counter named pages, so a simple bit of CSS generated from this SASS:
footer {
position: fixed;
bottom: 0;
left: 20px;
&:after {
counter-increment: page;
content: "Page " counter(page) " of " counter(pages);
}
}
Used to do what I want. Now it displays "Page [x] of 0".
I have tried using this bit of CSS to recreate my own max-page counter:
#page {
counter-increment: maxpage;
}
However this also returns 0 when used in my footer.
Is there any reasonably cross-browser friendly means of getting this functionality?
As of CSS3 you can specify counters in the #page rule. Here is an example:
#page { counter-increment: page }
The above rule instructs the layout engine to create a counter called "page" (it is called page by convention, it can be anything). This counter is incremented for each page. As with any counter, you can then use the current value of the counter anywhere in the document
For example with this CSS rule:
#pageNumber { content: counter(page) }
and this piece of HTML:
<span id="pageNumber"></span>
You can use the current page number counter as content in the HTML document. You can even go further. Say you want to start your page number at 10. You can then use the #page:first rule to reset the counter for the first page to value 9.
#page { counter-increment: page }
#page:first { counter-reset: page 9 }
The combination of both rules will reset the counter for the first page to 9. Then for each page (including the first) it will increment the counter. This results in a counter value of 10 for the first page, 11 for the second and so on.
You can also use pure css
Example:
#page {
counter-increment: page;
counter-reset: page 1;
#top-right {
content: "Page " counter(page) " of " counter(pages);
}
}
... in theory. In real world only PrinceXML supports this.
Not using #page, but I have gotten pure CSS page numbers to work in Firefox 20:
The CSS is:
#content {
display: table;
}
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: counter(page);
}
And the HTML code is:
<div id="content">
<div id="pageFooter">Page </div>
multi-page content here...
</div>
It works on most major browsers
According to mozilla docs,
CSS counters let you adjust the appearance of content based on its
location in a document.
So, if your css rule applies to multiple element, it will count all that elements.
If you are using header and footer element which basically appear 1 time in document and multiple time in print, counter-increment won't work because in document it has only 1 appearance.
This question already has answers here:
How can I prefix ordered list item numbers with a static string using CSS?
(3 answers)
Closed 6 years ago.
I would like to create an ordered list like the one below. I appreciate your help.
We first collect the following equipments:
Equipment 1: Driver's license.
Equipment 2: Credit card.
Equipment 3: Laptop.
Equipment 4: ...
Then we check the car in the following steps:
Step 1: Check under the car for obvious leaks. Driving with leaking fluid may cause failure of the steering, brakes or radiator.
Step 2: Check the tires for proper inflation and any obvious damage or signs of excessive wear.
Step 3: Ask someone to stand behind your car to check the lights.
Step 4: ...
All you would have to do is set up an ordered list like this:
HTML:
<ol>
<li>Step 1: Check under the car for obvious leaks. Driving with leaking fluid may cause failure of the steering, brakes or radiator.</li>
<li>Step 2: Check the tires for proper inflation and any obvious damage or signs of excessive wear.</li>
<li>Step 3: Ask someone to stand behind your car to check the lights.</li>
<li>Step 4: ...</li>
</ol>
CSS:
ol {
list-style-type: none;
}
But make sure in your CSS (whether it is your style tag in the <head></head> section or on a separate style sheet) that you add the list-style-type: none attribute, because that will remove the numbers on your list.
Give this a try
ol.step {
margin-left: 0;
counter-reset: list 0;
}
ol.step > li {
list-style: none;
}
ol.step > li:before {
counter-increment: list;
content: "Step " counter(list) ": ";
float: left;
width: 3.5em;
}
ol.equipment {
margin-left: 0;
counter-reset: equipment 0;
}
ol.equipment > li {
list-style: none;
}
ol.equipment > li:before {
counter-increment: equipment;
content: "Equipment " counter(equipment) ": ";
float: left;
width: 6em;
}
<h2>List 1</h2>
<ol class="equipment">
<li>Driver's license.</li>
<li>Credit card.</li>
<li>Laptop.</li>
</ol>
<h2>List 2</h2>
<ol class="step">
<li>I would like to create an ordered list like the one below. I appreciate your help.</li>
<li>Check under the car for obvious leaks. Driving with leaking fluid may cause failure of the steering, brakes or radiator.</li>
<li>Check the tires for proper inflation and any obvious damage or signs of excessive wear.</li>
<li>Ask someone to stand behind your car to check the lights.</li>
</ol>
https://jsfiddle.net/3z7y7vjr/5/
I'd like to use CSS to obtain an ordered list with continued numbering and in reverse. See attached figure.
Naturally, I'd like the resulting list to be in reverse order, i.e., [5], [4], etc.
Do I have to redesign the CSS part or is it a simple change? I can't figure out how to obtain the reverse numbering.
P.S.: I apologize for not putting the code in the question. Stack Overflow kept saying there was something wrong with it, even though everything was formed correctly in the preview. I lost patience after a few minutes trying to "fix" it.
Using CSS Counters
Currently there is no way to fully automate reverse numbering across multiple ol elements (without reversing the order of display of list items) with CSS counters when the no. of elements is dynamic. If reversing the order of display of list on the whole is fine, have a look at this answer.
You can make use of a bit of JavaScript along with counters to achieve this. The approach would be as follows:
Using JS, get the count (liCount) of applicable li elements when the page is loaded.
Set liCount as the second parameter for the counter-reset property on the parent container which would contain all the applicable ol elements. The second parameter to counter-reset property represents the initial/start value of the counter.
In CSS, set -1 as the second parameter for the counter-increment property. Generally the second parameter is the number by which the counter would be incremented every time. Here, since the value is set as -1 the counter would actually get decremented.
As normal, display the value of the counter using a :before pseudo element.
window.onload = function() {
var liCount = document.querySelectorAll('ol > li').length;
document.body.setAttribute('style', 'counter-reset: li ' + (liCount + 1));
}
ol {
list-style-type: none;
margin-left: 20px;
padding: 0px;
}
ol > li {
counter-increment: li -1;
}
ol > li:before {
content: "[" counter(li) "]";
padding-right: 10px;
}
<div id="content">
<h3>Year</h3>
<ul>
<li>2010-2015</li>
<li>2007-2008</li>
</ul>
</div>
<h3 id="2010-2015">2010-2015</h3>
<ol>
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
<h3 id="2007-2008">2007-2008</h3>
<ol>
<li>D</li>
<li>E</li>
</ol>
Why not reversed attribute?
Browser Support for CSS counter is much better than the reversed HTML5 attribute. The reversed attribute is not at all supported by IE and Opera.
JS would still be required irrespective of the approach used (to assign counter-reset value for counters, start value for ol reversed) but the JS for setting counter-reset is much simpler than the other when the numbering is across multiple ordered lists.
Below is a sample snippet using the reversed attribute. I take no credit for the approach as it was taken from the linked thread and other answer here. I have used it with added JS only to illustrate what I meant in Point 2 above.
window.onload = function() {
var liCount = document.querySelectorAll('ol > li').length;
var olEls = document.querySelectorAll('ol[reversed]');
var prevLiCount = 0;
for (var i = 0; i < olEls.length; i++) {
/* the below lines are required because start for first ol is from 5 whereas for next is from 2 */
olEls[i].setAttribute('start', liCount - prevLiCount);
prevLiCount = olEls[i].querySelectorAll('li').length;
}
}
<div id="content">
<h3>Year</h3>
<ul>
<li>2010-2015
</li>
<li>2007-2008
</li>
</ul>
</div>
<h3 id="2010-2015">2010-2015</h3>
<ol reversed="reversed">
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
<h3 id="2007-2008">2007-2008</h3>
<ol reversed="reversed">
<li>D</li>
<li>E</li>
</ol>
You could use something like this:
<ol reversed start="5">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Achieving sub numbering on ol items html
I'm trying to achieve something like this by using unordered list:
1. Title
Objective: some text here...
1.1 option1
1.2 option2
1.3 option3
2. Title
Objective: some text here...
2.1 option1
2.2 option2
2.3 option3
I tried using list-style: decimal; but that only achieves numbers like 1, 2, 3 etc whereas I need them to have format of 1.2 , 1.3 ... 2.1 ,2.3 etc. Also is this achievable by using one unordered list or will I need to use several?
In one of my projects, I used this code (demo)
(I don't remember where did I get it from, but it works)
ol{
counter-reset: listing ;
}
li {
display: block ;
}
li:before {
content: counters(listing, ".") " ";
counter-increment: listing ;
}
This method gives you controller over many other things of course: you can customize the counter as you pleased using the content property
I think it is impossible. See here all list-style possible types http://www.w3schools.com/Css/tryit.asp?filename=trycss_list-style-type_all
i think there might be browser compatibility issues with counter property in css.
Why not use jquery?
<style type="text/css">
ul
{
list-style-type: none;
}
</style>
<ul>
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
</ul>
<script>
var num = 1.0;
$( "li" ).each(function( index ) {
var text = $(this).text();
index++;
list = num + (index / 10);
$(this).html(list + " . " + text);
});
</script>
Now I know about the "normal" CSS list styles (roman, latin, etc) and certainly in years past they were somewhat inflexible in not allowing things like:
(a)
or
a)
only
a.
Now I believe that you can get an effect like the above with the :before and :after pseudo-elements. Is that correct? And whats the browser compatibility like if you can?
My main question however is that I want to have report style numbering:
Introduction
1.1 Objectives
1.2 Assumptions
1.3 Limitations
1.3.1 ...
New Section
...
and so on.
Can CSS do this and, if so, whats the browser compatibility like?
See Generated content, automatic numbering, and lists.
This example shows a way to number
chapters and sections with "Chapter
1", "1.1", "1.2", etc.
H1:before {
content: "Chapter " counter(chapter) ". ";
counter-increment: chapter; /* Add 1 to chapter */
counter-reset: section; /* Set section to 0 */
}
H2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}
Edit: quirksmode.org has a better table of css supports on browsers. Almost all browsers, except pre IE8b2 IEs. So yes, totally useless.
Here's the W3C specification for CSS2's automatic numbering and incrementing, with an example of 1.1, 1.2, 1.3 type numbering.
http://www.w3.org/TR/CSS2/generate.html#counters
I can't help you with the support question.
Here is my complete version of the pure css solution which goes all the way to level h6.
Tested with IE9 and Firefox 28.
body {
counter-reset:level1Header;
}
h1 {
counter-reset:level2Header;
}
h2 {
counter-reset:level3Header;
}
h3 {
counter-reset:level4Header;
}
h4 {
counter-reset:level5Header;
}
h5 {
counter-reset:level6Header;
}
h1:before {
counter-increment:level1Header;
content:counter(level1Header) ". ";
}
h2:before {
counter-increment:level2Header;
content:counter(level1Header) "." counter(level2Header) " ";
}
h3:before {
counter-increment:level3Header;
content:counter(level1Header) "." counter(level2Header) "." counter(level3Header) " ";
}
h4:before {
counter-increment:level4Header;
content:counter(level1Header) "." counter(level2Header) "." counter(level3Header) "." counter(level4Header) " ";
}
h5:before {
counter-increment:level5Header;
content:counter(level1Header) "." counter(level2Header) "." counter(level3Header) "." counter(level4Header) "." counter(level5Header) " ";
}
h6:before {
counter-increment:level6Header;
content:counter(level1Header) "." counter(level2Header) "." counter(level3Header) "." counter(level4Header) "." counter(level5Header) "." counter(level6Header) " ";
}
A simple markup example would be:
<ol>
<li>level one</li>
<ol start="10">
<li>level two</li>
<li>level two</li>
<ol start="110">
<li>level three</li>
</ol>
<li>level two
</ol>
<li>level one</li>
</ol>
The result of this is:
1. level one
10. level two
11. level two
110. level three
12. level two
2. level one
Browser support is fairly wide: MSIE6 complies. This is HTML 4.0