I'm trying to have the 2nd part of the nested ol have alphabet list items but it's all appearing as numbers. How do I change it to have a) and b) in the second nested part ?
<p>This is some texts:<br>
<ol>
<ol>
<li class=first list item.</li>
<li class="list-numbers">second list item</li>
</ul>
Some text
<ol class="list-alphabet">
<li class="list-alphabet">first list item second part.</li>
<li class="list-alphabet">second list item second part</li>
</ol>
</ol>
</div>
ol.alphabet li {
list-style: lower-alpha;
}
.alphabet ol li {
list-style: lower-alpha;
}
ol-.alphabet li {
list-style: lower-alpha;
}
ol li ol li.alphabet {
list-style: lower-alpha;
}
ol li ol li. {
list-style: lower-alpha;
}
See fiddle http://jsfiddle.net/setbon/gGEKH/
Looks like you mixed up your CSS 'list-alphabet / alphabet' names.
Updated code
<p>This is some texts:</p>
<br>
<ol>
<ol>
<li>first list item.</li>
<li>second list item</li>Some text
<ol class="alphabet">
<li>first list item second part.</li>
<li>second list item second part</li>
</ol>
</ol>
</ol>
CSS
ol.alphabet li {
list-style: lower-alpha;
}
Related
Consider the following code:
<ol class=top>
<li>Top item
<ol>
<li>Sub</li>
<li>list</li>
<li>item.</li>
</ol>
</li>
</ol>
And css:
.top > li {
text-decoration: underline;
}
.top ol li {
text-decoration: none;
}
Fiddle: http://jsfiddle.net/fLvns1z0/1/
I want only the "Top item" be underlined, but instead whole text is underlined. Even !important doesn't help.
Any ideas how to make it work and keep the code as simple as possible?
If you don't want to add an extra span or any other element to achieve the result as said by others, you can use css :first-line sudo class, check the working example below:
.top > li:first-line {
text-decoration: underline;
}
<ol class="top">
<li>Top item
<ol>
<li>Sub</li>
<li>list</li>
<li>item.</li>
</ol>
</li>
</ol>
It looks like it's because of the behaviour of <li> tag. If possible, please add a <span> and it should be fine:
.top span {
text-decoration: underline;
}
<ol class=top>
<li><span>Top item</span>
<ol>
<li>Sub</li>
<li>list</li>
<li>item.</li>
</ol>
</li>
</ol>
Also, when you add a <span> tag, you are clearly giving a separation. Plus the real reason is I am unable to fix the other way. Sorry about that. :(
You can redefine text-decoration with the same color as background:
.top > li {
text-decoration: underline;
}
.top ol li{
text-decoration: underline;
text-decoration-color: #fff;
}
<ol class=top>
<li>Top item
<ol>
<li>Sub</li>
<li>list</li>
<li>item.</li>
</ol>
</li>
</ol>
Or make some changes to the behavior of elements:
.top > li {
text-decoration: underline;
}
.top ol{
display:inline-block;
width:100%;
box-sizing:border-box;
}
<ol class=top>
<li>Top item
<ol>
<li>Sub</li>
<li>list</li>
<li>item.</li>
</ol>
</li>
</ol>
I will use an other design for an ordered list. So I found a nice solution here on SO.
body { counter-reset: item; }
ol.numbered_style li:before
{
counter-increment:item;
margin-bottom:5px;
margin-right:10px;
content:counter(item);
background:gold;
border-radius:100%;
color:white;
width:1.2em;
text-align:center;
display:inline-block;
}
ol.none, ul.none,ol.numbered_style { list-style: none; }
<ol class="numbered_style">
<li>First</li>
<li>Second</li>
<li>Third
<ol class="none">
<li>Subitem</li>
</ol>
</li>
<li>Fourth
<ul class="none">
<li>Other Subitem</li>
</ul>
</li>
</ol>
How is it possible not to use this style for sub-items in a list?
Why isn't the conditions for my class called none not working?
Also what do I have to do, if I want a second ordered list with the same class. It should begin with 1. <ol class="numbered_style" start="1"> didn't helped.
Is it possible to start a ordered list with a specify number like 2 or 1.1? For a normal ol I could use start="number", but I think it is disabled because of ol.numbered_style { list-style: none; }.
Adding as an answer since there are more than one part to the question:
How is it possible not to use this style for subitems in a list?
Use the children selector (>) to select only the li that are directly present under the parent ol tag instead of selecting all li elements that are at any level under the parent ol tag. The list-style setting has no effect here because the numbering here is generated and added using counters.
But what do I have to do, if I want a second ordered list with the same class. It should began with 1.
Add a counter-reset with the ol.numbered_style selector so that the number is reset everytime that element is encountered. This will make it restart at 1.
I don't need this now, but is there also a solution to start this ordered list with a specify number like 2 or 1.1?
Yes, starting it at 2 is possible. In the counter-reset property we can also provide the initial value of the counter (as the second in a list of space separated values). Refer below snippet for a demo.
body, ol.numbered_style {
counter-reset: item;
}
ol.numbered_style.starts_at_2 {
counter-reset: item 1; /* the second is the start value, default is 0 */
}
ol.numbered_style > li:before {
counter-increment: item;
margin-bottom: 5px;
margin-right: 10px;
content: counter(item);
background: gold;
border-radius: 100%;
color: white;
width: 1.2em;
text-align: center;
display: inline-block;
}
ol.none, ul.none, ol.numbered_style {
list-style: none;
}
<ol class="numbered_style">
<li>First</li>
<li>Second</li>
<li>Third
<ol class="none">
<li>Subitem</li>
</ol>
</li>
<li>Fourth
<ul class="none">
<li>Other Subitem</li>
</ul>
</li>
</ol>
<ol class="numbered_style">
<li>First</li>
<li>Second</li>
<li>Third
<ol class="none">
<li>Subitem</li>
</ol>
</li>
<li>Fourth
<ul class="none">
<li>Other Subitem</li>
</ul>
</li>
</ol>
<ol class="numbered_style starts_at_2">
<li>First</li>
<li>Second</li>
<li>Third
<ol class="none">
<li>Subitem</li>
</ol>
</li>
<li>Fourth
<ul class="none">
<li>Other Subitem</li>
</ul>
</li>
</ol>
Making it start at 1.1 is a bit more tricky as we have to add one counter at ol level and another at li level. Below is a sample demo.
body{
counter-reset: ol ;
}
ol.numbered_style{
counter-reset: li;
counter-increment: ol;
}
ol.numbered_style > li:before {
counter-increment: li;
content: counter(ol) "." counter(li);
margin-bottom: 5px;
margin-right: 10px;
background: gold;
border-radius: 100%;
color: white;
width: 2em;
text-align: center;
line-height: 2em;
display: inline-block;
}
ol.none, ul.none, ol.numbered_style {
list-style: none;
}
<ol class="numbered_style">
<li>First</li>
<li>Second</li>
<li>Third
<ol class="none">
<li>Subitem</li>
</ol>
</li>
<li>Fourth
<ul class="none">
<li>Other Subitem</li>
</ul>
</li>
</ol>
I would like to print three levels of ordered list: first level with upper roman, second level with lower roman and third level with decimal.
I am blocked because I don't know how to use one class name to achieve this. For example, I tried:
ol.terms {
list-style-type: upper-roman;
}
ol.terms ol li {
list-style-type: lower-roman;
}
ol.terms ol li ol li {
list-style-type: ;
}
<ol class='terms'>
<li>
<ol>
<li>
<ol>
<li></li>
</ol>
</li>
</ol>
</li>
</ol>
Could anybody give me a hand? thanks in advance.
use decimal property for list style
ol.terms {
list-style-type: upper-roman;
}
ol.terms ol li {
list-style-type: lower-roman;
}
ol.terms ol li ol li {
list-style-type:decimal;
}
<ol class='terms'>
<li>
<ol>
<li>
<ol>
<li></li>
</ol>
</li>
</ol>
</li>
</ol>
We have eBook, in that one of the list has strike through the text as well as the bullet. i can able to strike the text using (text-decoration: line-through;). But i can strike through the bullet in the list, please help me to get a solution?
Here is one way to implement
with Order list
HTML :
<body>
This fiddle is used to demonstrate the list styling with CSS
<ol>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>
</ol>
</body>
and CSS :
ol li
{
list-style-type: none;
counter-increment: item;
text-decoration:line-through;
}
ol li::before
{
content:counter(item) ".";
text-decoration:line-through;
}
With unordered list, it is a little bit more complicated
HTML:
<body>
This fiddle is used to demonstrate the unordered list styling with CSS
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</body>
and CSS:
ul{
float:left;
}
li {
list-style: circle;
list-style-position: inside;
margin-top:8px;
}
li:after{
border-top:1px solid red;
display:block;
content:"";
margin-top:-8px;
}
I was wondering if it's possible to style nested unordered lists with CSS only, without using any scripts. The problem is that CSS needs to work for any depth of the list tree.
For example, I have a list:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="holder">
<ul>
<li>Item 4</li>
<li>Item 5</li>
<li class="holder">
<ul>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li class="holder">
<ul>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
And this is my CSS:
li{
background: gray;
border: 1px solid;
display: block;
margin: 2px;
}
.holder{
background: none;
border: none;
}
/*replace these styles*/
li > ul > li{
background: white;
}
li > ul > li > ul > li{
background: gray;
}
li > ul > li > ul > li > ul > li{
background: white;
}
If node's parent has background A, node should have background B. If node's parent has background B, node should have background A.
Please check : http://jsfiddle.net/bCU34/6/
CSS selectors allow you to select all named elements of a parent node by separating the named element from the parent element with a space. To select all unordered list elements, for example, you would do like below. Notice all ul elements at any depth inherit the style no bullets/margin/padding. In order do style nth layer for an element type, you need to use the parent selector >. See below. I used font color but you could set background images the same way. Note there is no decendant level selector at this time that I know of. This was addressed on another post CSS select nested elements up to N levels deep.
.container ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.container > ul > li {
color: green;
}
.container > ul > li > ul > li {
color: red;
}
.container > ul > li > ul > li > ul > li {
color: blue;
}
<section class="container">
<h1>CSS Nested List Styling</h1>
<ul>
<li>
<h3>Section 1</h3>
<ul>
<li>
<h4>Foo</h4>
<ul>
<li>
<h5>Bar</h5>
</li>
<li>
<h5>Bar</h5>
</li>
</ul>
</li>
<li>
<h4>Foo Bar</h4>
<ul>
<li>
<h5>Bar</h5>
</li>
<li>
<h5>Bar</h5>
</li>
</ul>
</li>
</ul>
</li>
<li>
<h3>Section 2</h3>
<ul>
<li>
<h4>Hello</h4>
<ul>
<li>
<h5>World</h5>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
There isn’t any specific way of doing this currently with Selectors level 3, and the current draft of Selectors level 4 doesn’t seem to add anything either. I had a dig through the www-style mailing list and came up with this post by Lachlan Hunt from April 2005 that suggests that an :nth-descendant() style selector had been considered but never specified.