Using ul Inside ol - html

I'm trying to write a valid HTML however this fails:
<ol>
<li>First</li>
<li>Second</li>
<ul>
<li>First of second</li>
</ul>
</ol>
This fails at when generating javadoc. It says:
error: tag not allowed here: <ul>
Desired output should be like that:
First
Second
First of second
Isn't it valid to define ul inside ol?


Wrap the ul in an li, as the only valid children of ul and ol are li.
If you don't want the bullet to show, you can exclude them via a class
HTML:
<ol>
<li>First</li>
<li>Second</li>
<li class="no-bullet">
<ul>
<li>First of second</li>
</ul>
</li>
<li>Third</li>
</ol>
CSS:
.no-bullet {
list-style: none;
}
fiddle
If you don't want to use CSS, either use inline-styles or the type attribute:
<li style="list-style: none;">Item</li>
OR
<li type="none">Item</li>


Place the unordered list ul inside the list item li,
<ol>
<li>First</li>
<li>Second
<ul>
<li>First of second</li>
</ul>
</li>
<li>Third</li>
</ol>
fiddle

Related

Is Firefox violating spec by its odd cumulative application of counting to LI markers when there's a counter-reset declaration?

Usually when CSS counters are used on lists, the OL list-style-type is set to none and and ::before pseudo-elements are used instead of true list markers.
However, I noticed that in Firefox (69.0, target:x86_64-apple-darwin, running on MacOS Mojave) the presence of a counter-reset does something odd to actual list markers. Consider:
ol {counter-reset: some-counter;}
li::before {
content: "Marker should be: " counter(some-counter) ".";
counter-increment: some-counter;
}
ol.alpha {list-style-type:lower-alpha;}
ol.alpha > li::before{content: "Marker should be: " counter(some-counter, lower-alpha) ".";}
<h2>List A</h2>
<ol>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
</ol>
<h2>List B</h2>
<ol>
<li>
<ol class="alpha">
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li>
<ol class="alpha">
<li style="counter-reset: some-counter"></li>
<li></li>
<li></li>
</ol>
</li>
</ol>
Chrome and Safari render as expected, but in FF, List A gets rendered as:
and List B gets rendered as:
In other words, when going through a two-level list, FF is keeping track of:
A shared list marker counter that is incremented both when it hits both the first-tier LIs and any LIs nested inside.
A counter instance of "some-counter" that applies only to the outer list
Counter instances of "some-counter" that apply only to any inner lists
FF's list markers display that shared counter (with any necessary translation, e.g to lower-alpha in List B above), while ::before pseudo-elements display the "some-counter" instances appropriate to their level.
If you comment out the counter-reset, FF goes back to expected behavior in its markers. (Even setting "counter-reset:none" still causes the strange behavior.)
Is this a bug, or is there some reason that there would be undefined behavior in list markers when a counter-reset (even counter-reset:none;) is applied to a top-level <ol>?

This is intentional, pending a spec clarification. (This behavior was implemented for Firefox 68.)
Firefox lets your ol {counter-reset: some-counter} rule override the built-in UA style ol {counter-reset: list-item}, removing any special meaning of the ol wrt list numbering. As noted in the bug, you can specify both counters (ol {counter-reset: some-counter list-item;}) to fix this.
ol {counter-reset: some-counter list-item;}
li::before {
content: "Marker should be: " counter(some-counter) ".";
counter-increment: some-counter;
}
ol.alpha {list-style-type:lower-alpha;}
ol.alpha > li::before{content: "Marker should be: " counter(some-counter, lower-alpha) ".";}
<h2>List A</h2>
<ol>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
</ol>
<h2>List B</h2>
<ol>
<li>
<ol class="alpha">
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li>
<ol class="alpha">
<li style="counter-reset: some-counter"></li>
<li></li>
<li></li>
</ol>
</li>
</ol>

Building an HTML list with custom text for each label [duplicate]

This question already has answers here:
Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css?
(12 answers)
Closed 5 years ago.
I have a list where I need to create the (rather odd) structure:
1.1.
1.1.1.
1.1.2.
1.1.3.
2.
1.1.4.
1.1.5.
1.1.6.
3.
4.
My working structure is:
<ol>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li></li>
<li></li>
</ol>
I could just work around it and not use a list element (laying it out manually). But I was wondering if it's possible with standard <li> elements, to set specific string values for the label of each item.
I have tried using the <li value=""></li> syntax, but it only seems to work for integers.
To point out the key differences between this and a normal list:
The top level list uses two different label "types" ("1.1" for the first, "2" for the second)
The sub items in the second top level menu item follow on from those in the first list item.
There are only two list "levels", but the sub menu items have 3 digit labels.
Is there any built in solution for list labels in structures that don't follow a numerical pattern?

You can using counters.
Example:
ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }
<ol>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
</li>
<li>three
<ol>
<li>three.one</li>
<li>three.two</li>
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</ol>
</li>
<li>four</li>
</ol>

Would something like this work for you?
ol li ol {
margin-left: 2.5em;
}
ol li ol li:before {
content: "1.1.";
margin-left: -2.5em;
}
<ol>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li>
<ol start="4">
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li></li>
<li></li>
</ol>

List element inside list element doesn't work CSS

<ul>
<li>This
<li>and this</li>
</li>
</ul>
I try to select the second <li> by doing:
li li {
background: "red";
}
Why doesn't it work?

You are missing one ul... And the document is not valid HTML5. Try this one (this is a proper way of nesting lists):
<ul>
<li>This
<ul>
<li>and this</li>
</ul>
</li>
</ul>
Then in CSS:
ul li ul li {
background: "red";
}
More to read here: Proper way to make HTML nested list?
Best regards, hope it helps!

not able to apply css rules to parent elements only

I m having a list with ul and li s.
Now I want to apply a css rule to the parents only and not to the children.
For this I'm using the > symbol but that is applied to the children as well.
The example here
The code I used at the css -
#nav > li a {
padding-bottom: 30px;
}
The html being -
<ul id="nav">
<li>
Home
</li>
<li>
About
<ul>
<li>The product</li>
<li>Meet the team</li>
</ul>
</li>
<li>
Services
<ul>
<li>Sevice one</li>
<li>Sevice two</li>
</ul>
</li>
<li>
Product
<ul>
<li>Small product (one)</li>
<li>Small product (two)</li>
</ul>
</li>
<li>
Contact
<ul>
<li>Out-of-hours</li>
<li>Directions</li>
</ul>
</li>
</ul>

I think you want to use #nav > li > a which covers a children of the <li>. Otherwise any <a> descendant of the <li> is also selected (which is everything).

As of CSS3, there is no way to select an element based on its children. I think that something like that is coming in CSS4, but I'm not sure.
Small note: the > selector selects only the children, not the parents and the children.

Why are UL lists messed up by CSS height attribute?

I'm puzzled by this. In a nested list, by setting the height of LI elements the list, the items overlap. What is the explanation for this, and what is the proper way apply height without overlap effect? (I want height, not padding or margins.)
.aaa {background:#ccf;}
.bbb {background:#fcc;}
.bbb li {height:25px;}
<ul class="aaa">
<li>one one one</li>
<li>two, too
<ul>
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</li>
<li>three</li>
<li>here comes four</li>
</ul>
<ul class="bbb">
<li>one one one</li>
<li>two, too
<ul>
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</li>
<li>three</li>
<li>here comes four</li>
</ul>

<li>two, too
<ul> <-- this list is part of your LI
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</li>
Since you have a list nested in a list, the inner list overflows because it is bigger than 25px.
Use min-height instead of height.

The second tier li is inheriting the CSS from the top tier li
You need come CSS like
ul li ul li {/*style to hit the bottom tier*/}
This looks like you are making a menu - Tuts like this (http://www.devinrolsen.com/pure-css-vertical-menu/) could advise you for better code but Padding and margin are recognised techniques to achieve what you apparently want