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>
Related
I have the next issue when I try to numbering the list
.contenido ol {
padding-left: 0px;
counter-reset: item;
}
.contenido ol > li {
display: block;
}
.contenido ol > li::before {
content: counters(item, ". ") " " ;
counter-increment: item;
}
.contenido ol ol > li {
display: block;
}
.contenido ol ol > li::before {
content: counters(item, ". ") ". " ;
}
and the html I have:
<div id="test">
<ol>
<li> item1</li>
<li> item2
<ol>
<li>item 2.1</li>
<li>item 2.2
<ol>
<li>item a</li>
<li>item b</li>
<li>item c </li>
</ol>
</li>
<li>item 2.3</li>
</ol>
<li>item 3</li>
<ol>
</div>
In the page showed:
1. item1
2. item2
1. item 2.1 --- in this part I want to show as 2.1
2. item 2.2 --- in this part I want to show as 2.2
a. item a
b. item b
c. item c
3. item 2.3 --- in this part I want to show as 2.3
3. item 3
Your code seems fine with me. Its rendering by my browser showed your wishes.
If you perchange want to omit the a/b/c-items from the numbering, you can try to be more specific:
CSS:
ol {
counter-reset: section;
list-style-type: none;
}
#contentar>ol>li::before,
#contentar>ol>li>ol>li::before{
counter-increment: section;
content: counters(section,".") " ";
}
HTML:
<div id="contentar">
<ol>
<li> item1</li>
<li> item2
<ol>
<li>item 2.1</li>
<li>item 2.2
<ol>
<li>item a</li>
<li>item b</li>
<li>item c </li>
</ol>
</li>
<li>item 2.3</li>
</ol>
</li>
<li>item 3</li>
</ol>
</div>
I need to select elements in a certain order. I have an image carousel that could have any number of images but only 3 images show at a time. I need to add css styles to the 1st and 3rd image and different styles to the 2nd image.
The code below is a simplified version of what I am looking for. I need it to be dynamic as I dont know the number images the carousel will have. Is there a formula for example nth-of-type(4n-7), that I can use to target this order dynamically?
li:nth-of-type(1),
li:nth-of-type(3),
li:nth-of-type(4),
li:nth-of-type(6),
li:nth-of-type(7),
li:nth-of-type(9) {
color: red;
}
li:nth-of-type(2),
li:nth-of-type(5),
li:nth-of-type(8) {
color: blue;
}
From your text you want to select every third image/item starting with the 2nd one.
If so the selector would be element:nth-of-type(3n+2)
li:nth-of-type(3n+2) {
color: red;
}
li:nth-of-type(3n) { /* for demo only */
margin-bottom: 1em;
}
<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>
</ul>
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);}
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>
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>