I try to show an ordered list from 1 to 7.
<ol>
<li>item 1</li>
<li>item 2
<ol>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ol>
</li>
<li>item 6</li>
<li>item 7</li>
</ol>
Expected:
Yes #Rajibkarmaker, was about counter-reset the first ol and then counter-increment to every li!
ol.example{counter-reset: section;}
ol.example,ol.example ol {list-style:none}
ol.example li::before {counter-increment: section; content: counter(section);}
Related
ol::before:marker {
font-size: 120%;
color: #00b7a8;
font-family: "Comic Sans MS", cursive, sans-serif;
content: '√';
}
I want to add "√" before ::marker element and this is my CSS code, but it's no use，could you help me?
Add symbol with class
ol>li.checked::marker {
content: "√ " counter(list-item) ". ";
}
ul>li.checked::before {
content: "√";
margin-left: -30px;
margin-right: 21px;
}
<h3>Ordered</h3>
<ol>
<li class='checked'>item 1</li>
<li>item 2</li>
<li class='checked'>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ol>
<h3>Unordered</h3>
<ul>
<li class='checked'>item 1</li>
<li>item 2</li>
<li class='checked'>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ul>
<h3>Nested list</h3>
<ul>
<li class='checked'>
<ol>
<li class='checked'>item 1</li>
<li>item 2</li>
<li class='checked'>item 3</li>
<li>
<ul>
<li class='checked'>item 1</li>
<li>item 2</li>
<li class='checked'>item 3</li>
<li>item 4</li>
</ul>
</li>
<li>item 5</li>
</ol>
</li>
<li>item 2</li>
<li class='checked'>item 3</li>
<li>item 4</li>
</ul>
Add symbol without class
ol>li::marker {
content: "√ " counter(list-item) ". ";
}
ul>li::before {
content: "√";
margin-left: -30px;
margin-right: 21px;
}
<h3>Ordered</h3>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ol>
<h3>Unordered</h3>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ul>
<h3>Nested list</h3>
<ul>
<li>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</li>
<li>item 5</li>
</ol>
</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
If you don't want to use a class then use :nth-* to specify which <li> to style. Just style the ::marker pseudo-element, it gets too crowded with ::before added in. The content: can be manually filled. The normal ::marker for a <li> inside an <ol> is a number and a dot (ex: 1.) so include that and add anything behind it, in front of it, etc..
li:first-of-type::marker {
content: '✔️/*space*/1./*space*/'
}
li:first-of-type::marker {
content: '✔️ 1. ';
}
<ol>
<li>...I</li>
<li>...II</li>
<li>...III</li>
<li>...IV</li>
<li>...V</li>
</ol>
I'd like to create a multi column list like this:
https://jsfiddle.net/37dfwf4u/
No problem when using a different list for each column:
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
<ul>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
ul {
display:inline-block;
}
However, can this be done by a continuous list and pure CSS so that the CSS arranges the columns automatically?
E.g. by use of flex layout which I'm not yet familiar with?
Yes, you can create a multi column list as described if you make the ul a flex container, change the flex-direction to column, allow it to wrap by applying flex-wrap: wrap and additionally force it to wrap by limiting its height:
ul {
height: 100px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
<li>item 11</li>
<li>item 12</li>
<li>item 13</li>
<li>item 14</li>
<li>item 15</li>
<li>item 16</li>
<li>item 17</li>
<li>item 18 </li>
<li>item 19</li>
<li>item 20</li>
<li>item 21</li>
</ul>
Here's another possibility, added half a year later after the comment by #Andrew Koper:
You can also use the colummn-count parameter, which doesn't require a fixed height (and also not flex), but defines a fixed number of columns. So in the example below, even just two list items would be broken into two columns of one list item each:
ul {
column-count: 2;
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
<li>item 11</li>
<li>item 12</li>
<li>item 13</li>
<li>item 14</li>
<li>item 15</li>
<li>item 16</li>
<li>item 17</li>
<li>item 18 </li>
<li>item 19</li>
<li>item 20</li>
<li>item 21</li>
</ul>
Consider using CSS3 Multi-column Layout for that:
CSS3 Multiple Columns
You can do that using just one list and define the number of columns with CSS. If you check CSS3 Multi-column layout browser support here you can see partial support by most of the browsers, because they do not support break-before, break-after and break-inside properties. But they do support the properties you will need to create a multi column list with a prefix.
.container {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
ul {
margin: 0;
}
<div class="container">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
</div>
Is it possible to define a style for an ordered list that renders something like
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
as
(1) Item 1
(2) Item 2
(3) Item 3
You can use css counter and :before pseudo-element to create this type of list.
ol {
counter-reset: custom;
list-style-type: none;
}
ol li:before {
content: '('counter(custom)') ';
counter-increment: custom;
}
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Can you please take a look at this demo and let me know why I am not able to not add the css rule to the first item using the not option?
li:not(first) {
color: red;
}
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
<li>Item 2-4</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
You probably meant :not(:first-child) (there is no CSS first). There is :first but that's for printing:
The :first #page CSS pseudo-class describes the styling of the first
page when printing a document.
li:not(:first-child){ color:red; }
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
<li>Item 2-4</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
You could also do li:not(:first-of-type):
li:not(:first-of-type){ color:red; }
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
<li>Item 2-4</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Or li:not(:nth-child(1)):
li:not(:nth-child(1)){ color:red; }
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
<li>Item 2-4</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Or li:not(:nth-of-type(1)):
li:not(:nth-of-type(1)){ color:red; }
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
<li>Item 2-4</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
By the way, if you're wondering why the inner list doesnt have its first element's color changed it because color is an inherited property.
You got the syntax wrong
li:not(:first-child)
I'm using the CSS3 multi-column layout for an ordered list, but the list-numbers for the individual list-items's aren't being displayed in the second column.
Here's the JSFiddle.
Sample code is below.
HTML
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ol>
And CSS:
ol {
-moz-column-count 2;
-webkit-column-count: 2;
column-count: 2;
}
That's because the default padding on the ol allows for the numbers to be displayed. By default, they are displayed on the outside of the element, and since the second column doesn't have an padding, they aren't displayed.
You could position them on the inside by adding list-style-position: inside:
ol {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
list-style-position: inside;
}
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ol>
Alternatively, you could also use CSS3 counters and displaying the number on the li element using a pseudo element:
Example Here
ol {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
list-style: none;
padding-left: 0;
}
ol {
counter-reset: list;
}
li:before {
counter-increment: list;
content: counter(list) ". ";
}
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ol>