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>
Related
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>
I have a (jquery ui) sortable list with li-elements, that hold information (an id for further processing) in their value-attribute.
However, I want my list to show numbering next to it, similar to this fiddle: http://jsfiddle.net/knj92mvu/
(Of course I mean the numbering of #correctList, to be sure ...)
$("#myOL").sortable({
update: function (event, ui) {
console.log('new index of dropped item:' + ui.item.index());
}
});
Now the OL elements think theyre smart by getting their position number from the value-property of the li. But, as said, the value-property is important for me and I can not overwrite it.
Is there a way I can display correct numbering of the items (1, 2, 3 for my example link given above) ignoring the value-property?
A possible workaround I can imagine: use one of the events of the .sortable(), get the index of the items and write it to the innerText of the li.
However I want to ensure there is no "clean" workaround for this, where I can assign certain numbering to lists, ignoring the value-property. Basically also for information how I could solve this WITHOUT jquery ui.
You can use CSS Counters
CSS:
#myOL{
list-style-position: inside;
list-style-type: none;
}
#myOL ol{
counter-reset: list 1;
}
#myOL li:before {
content: counter(list) '. ';
}
#myOL li{
padding: 4px;
border: 1px solid #ccc;
counter-increment: list 1;
}
JSFiddle demo
You can circumvent the counting logic entirely by using <div>s instead of <li>s:
<ol>
<div style="display:list-item;" value="whatever">Text</div>
<ol>
Here's your fiddle updated: http://jsfiddle.net/mbw41oj5/
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.
This question already has answers here:
How to hover only the current li in nested ul?
(5 answers)
Closed 4 years ago.
I have got an simple html unordered list.
<ul>
<li>Item 1</li>
<li>
Group 1
<ul>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
I want to use CSS to make a simple effect when the mouse is over an Item or a Group.
li:hover
{
background-color:#ff0000;
}
It works quite fine for "Group 1" or "Item 1" (not contained in a group) - When I'm moving the mouse over the color changes. But if I move over "Item 2" or "Item 3" "Group 1" also remains hightlighted (red background). In this case I only want to highlight "Item 2" or "Item 3".
Has anyone an idea how to do this?
Thanks for your help!
===============================
EDIT
<ul>
<li>Item 1</li>
<li>
Group 1
<ul>
<li>Item 2</li>
<li>Group 2
<ul>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
</ul>
</li>
</ul>
Mouse Over xxx should highlight yyy
xxx -> yyy
Item1 -> Item1
Group1 -> Group1, Item2, Group2, Item3, Item4
Item2 -> Item2
Group2 -> Group2, Item3, Item4
Item3 -> Item3
Item4 -> Item4
Please see http://image-upload.de/image/r76d79/1c7af56a19.png ,just a quick drawing.
This solution isn't a purely HTML/CSS one, but it works. It uses the Javascript library jQuery.
http://jsfiddle.net/XP3Vp/
Put this in the head-section of your page:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$('li').mouseover(function()
{
if ($('li ul li:hover').length)
{
$('li ul li:hover').css('background','red');
}
else
{
$('li:hover').css('background','red');
}
});
$('li').mouseout(function()
{
$(this).css('background', 'transparent');
});
</script>
Use this if you don't want the underlying list items to be highlighted as well when moving the cursor over Group 1: http://jsfiddle.net/CwhhN/
The best you can do is to colorize the ul as well ..
ul{background-color:#fff;}
li:hover
{
background-color:#ff0000;
}
something like this http://jsfiddle.net/gaby/DxsDa/ although it will still highlight the group 1 text..
Alternatively you can resort to invalid html but i would not suggest that for obvious reasons.. http://jsfiddle.net/gaby/DxsDa/1/
Group 1 contains Item 2. So, when you are hovering Item 2 you are also hovering Group 1.
Thus, with CSS what you want is not possible without mis-formatting HTML on purpose.
With JS you can get there, though.
If this is acceptable, refer to #RobinJ's answer.
Found probably the best solution at the jQuery documentation.
http://api.jquery.com/event.stopPropagation/
$('li').mouseover(function(e)
{
e.stopPropagation();
$(this).addClass('hover');
});
$('li').mouseout(function()
{
$(this).removeClass('hover');
});
Use class or id for UL element (which is parent for highlighted li's) and directly children selector:
ul#your_id > li:hover{ background-color: #f00; }
It will fix error which happens because you try to highlight every li's elements :)