Is there a way to not display the number for a single li in an ol. It's not an issue if it still contributes to the count of the list (I know this might seem like a strange request).
Yes, just set the CSS list-style-type property to none on the particular <li>.
li.nostyle {
list-style-type: none;
}
<ol>
<li>one</li>
<li>two</li>
<li class="nostyle">three</li>
<li>four</li>
</ol>
This will hide your first ordered list number.
This will look strange since your hiding your first number in the ordered list. This is one possible solution through CSS
ol li:first-child { list-style:none }
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
(Not the answer, but in case someone needs...)
If you want to hide the number (bullet) of single item lists, you can use CSS3 :only-of-type selector.
li:only-of-type { list-style-type: none; }
This way, you won't have to assign different classes to your lists. Your lists can grow and shrink as necessary.
And this works for both ordered and unordered lists.
Related
Why do the nested <ol> list items receive the sqpurple.gif bullet?
ul > li {
list-style: outside url("https://www.w3schools.com/cssref/sqpurple.gif") disc;
}
<ul>
<li><ul> - parent
<ol>
<li><ol> - parent. Shouldn't this be a number?</li>
</ol>
</li>
</ul>
Windows 10 x64
Chrome v91.0.4472.114
Firefox v89.0.1
Edge v91.0.864.67
Per https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image:
Note: This property is applied to list items, i.e. elements with display: list-item; by default this includes <li> elements. Because this property is inherited, it can be set on the parent element (normally <ol> or <ul>) to let it apply to all list items.
To fix this you should reset the <ol> to have no image.
The use of ul > li is flawed since you should be setting the list-style-image property on the <ul> or <ol>
ul {
list-style-image: url("https://www.w3schools.com/cssref/sqpurple.gif");
}
ol {
list-style-image: none;
}
<ul>
<li><ul> - parent
<ol>
<li><ol> - parent. This is now a number as expected!
<ul>
<li><ul> - parent</li>
</ul>
</li>
</ol>
</li>
</ul>
I had to puzzle this one out, too, and I've been doing CSS for more than 20 years. The best way to explain it, I think, is that the rule is inherited, not the selector. That is, any element inside the selected element gets the rule, and since any li accepts a list-style property rule, it applies.
As others have demonstrated, the solution is to override for interior list items. You may also be able to implement the :not pseudo-selector to be more restrictive in your selector. (Actually, you can't, at least using combinators).
Here is a similar post: https://stackoverflow.com/a/6367905/9730836
You can reset the style to every children (as there is inheritance).
Try:
ul>li {
list-style: outside url("https://www.w3schools.com/cssref/sqpurple.gif") disc;
}
li * {
list-style: initial;
}
<ul>
<li><ul> - parent
<ol>
<li><ol> - parent. Shouldn't this be a number?</li>
</ol>
</li>
</ul>
I have a bullet list and I want just a single item without a bullet. How do I do that? For example, in the following, can I get the "Cheese" with no bullet:
<ol>
<li>Milk</li>
<li>Cheese</li>
<li>Goats</li>
</ol>
Many good SO threads deal with changing the entire list, but I'm interested in a specific item.
You can just target any of the list items with class or pseudo selectors
Example below shows this using first-child and class
li:first-child,
.no-bullet {
list-style: none;
}
<ol>
<li>Milk </li>
<li class="no-bullet">Cheese </li>
<li>Goats </li>
</ol>
The solution would be
ol > li:nth-child(2) {
list-style: none;
}
Is it possible to style an unordered list so that the second line and the ones after that are indented the same as the first line of the list item?
Please see the example for exactly what I mean
O----First Line
--SECOND LINE SHOULD START HERE
--EVERY OTHER LINE SHOULD BE LIKE THIS ALSO
Just to supplement my comment, here is a jsfiddle demonstrating what I mentioned. http://jsfiddle.net/R5ptL/
<ul>
<li>Parent</li>
<ul>
<li>Child1</li>
<li>Child2</li>
<li>Child3</li>
</ul>
<li>Parent2</li>
</ul>
And if you want them to be the same style...
ul, li {
list-style-type: circle; /* or whatever style you choose */
}
EDIT: How to do this with multiple unordered lists AND CSS only: http://jsfiddle.net/R5ptL/1/
use the css first-child selector to apply the indent to every line other than the first.
ex:
ul li:first-child{margin:0px;}
ul li{margin:5px;}
li:not(first-child) {
margin-left: 20px;
}
or
li {
margin-left: 20px;
}
li:first-child {
margin-left: 0;
}
It's like this: (HTML solution, not CSS)
<ul>
<li> first item </li>
<li> second item
<ul>
<li>first item of second list</li>
<li>second</li>
</ul>
</li>
<li> continue primary list </li>
</ul>
In short, you nest a complete new UL inside the primary UL.
My first answer was apparently incorrect after further testing. This should work though:
ul li {
text-indent:-10px;
margin-left:10px;
}
NOTE: This answer runs under the assumption that every line other than the first is simply wrapped text. If those other lines are meant to be sub-points, go with gwin003's answer.
I'm experimenting with a design. It seems I can't get my CSS right. I have a horizontal list with a list in each of it's list items. The nested list doesn't seem to behave properly. What am I doing wrong here?
http://jsfiddle.net/89sqw/
The nested list doesn't have the squared list type, and the margin is all wrong.
Everything you apply to #tfList li is valid to your nested list items too (unless you override). Also, you shouldn't have two elements with the same id, use classes instead.
Several prolems:
1) As mentioned by #bfavaretto, you can't have multiple elements with the same ID
2) You aren't closing your "P" tags. Closing tags have a slash (</p>)
3) You are using display: inline on an element which will contain block elements. This is invalid not good practice and will likely give you problems. Use inline-block instead:
#some-item {
display: inline-block;
vertical-align: top;
*display: inline;
*zoom: 1;
}
Edit: Tip - you can use special "child" selectors to only select immediate children of an element. http://jsfiddle.net/ryanwheale/F3cqD/
<ul>
<li>
Level 1
<ul>
<li>Level 2</li>
<li>Level 2</li>
</ul>
</li>
<li>Level 1</li>
</ul>
And these styles
ul > li {
color: red;
}
ul > li > ul > li {
color: green;
}
The issue is easy to miss, but it comes from having overridden the display property of #tfList li elements to display: inline, and then mistakenly trying to re-set it to display: block;.
The correct display for a list item is:
display: list-item;
Also, to get the spacing back on the list items, set the left padding on the ul element.
Fiddle
I have a requirement to display a hierarchy of projects. The obvious solution is a series of nested unordered lists. However, the problem I need to overcome is that the node value needs to be left aligned across the entire tree with the project name being indented as expected in a tree. Here is a sample
Project Root Node
1 Task 1
1.1 Travel
1.2 Do Work
2 Task 2
2.1 Perform Testing
2.1.1 UI Testing
2.1.2 Connection Testing
The markup is fairly simple...
<ul>
<li><span></span>Project Root Node
<ul>
<li><span>1</span>Task 1
<ul>
<li><span>1.1</span>Travel</li>
<li><span>1.2</span>Do Work</li>
</ul>
</li>
...and so on...
Turning the bullets off is easy. Left aligning every li is easy. But the problem is getting the span to stay to the left while the text after the span is properly indented and aligned for that level.
The closest I could get it was that since the span for each level has the same number of characters I could just add a right margin and that would push the following text over. The problem is that since the characters in the span vary slightly in width, the text could be one or two pixels off in vertical alignment with the row above or below.
The other solution I had was to include a "level number" class when rendering the li element along with an appropriate style that set inline-block and width. My problem with that is making sure I defined enough levels to cover any tree depth.
an ordered list with a bit of counters magic, no IE7 and below, though it degrades to an indented numbered list.
CSS
ol {
counter-reset: item;
padding: 0;
margin: 0;
margin-left: 20px !ie7;
}
ul {margin: 0; padding: 0; list-style: none;}
li {
display: block;
}
ol li:before {
display: inline-block;
content: counters(item, ".") " ";
counter-increment: item;
width: 50px;
}
ol li li:before {width: 70px;}
ol li li li:before {width: 90px;}
ol li li li li:before {width: 110px;}
and the HTML:
<ul>
<li>Project Root Node
<ol>
<li>Task 1
<ol>
<li>Travel (1.1)
<ol>
<li>Travel (1.1.1)</li>
<li>Do Work (1.1.2)</li>
</ol>
</li>
<li>Do Work (1.2)</li>
</ol>
</li>
<li>Task 2
<ol>
<li>Travel (2.1)</li>
<li>Do Work (2.2)</li>
</ol>
</li>
<li>Task 3
<ol>
<li>Travel (3.1)</li>
<li>Do Work (3.2)</li>
</ol>
</li>
</ol>
</li>
</ul>
adjust the widths of the :before psuedo elements to create the indented text
updated to make project node not numbered and include IE7 remargin
UPDATE
link to JSFiddle containing a samle of code using dls (definition lists) instead bearing in mind the need for IE7 support
JSFiddle using DL
This might be a little "hackish," but what I would do is use the nested unordered lists, as you have them, and place the spans in there as well with classes like list-level-1, list-level-2, and so on. For JavaScript-disabled browsers, it'll display as a normal nested list. Using jQuery or another JavaScript library, convert the lists into series of <div>s (with two classes like list-item-number and list-item-level-1, list-item-level-2). Set the margin-left for the latter to appropriate widths.
<div class="row"><div class="list-item-number">1</div><div class="list-item-level-1">Fruits</div></div>
<div class="row"><div class="list-item-number">1.1</div><div class="list-item-level-2">Apples</div>
<div class="row"><div class="list-item-number">1.1.1</div><div class="list-item-level-3">Red Delicious</div>
<div class="row"><div class="list-item-number">1.1.2</div><div class="list-item-level-3">Fuji</div>
You could even use a table to a similar effect (and superior semantic meaning, in my opinion), but I have had bad luck with tables and jQuery.
For a pure HTML/CSS solution, your best option is to use a table. Remember that tables aren't inherently bad -- they're just bad for layout.
To keep everything aligned correctly, I would take the spans out of normal flow by floating them and give them a negative margin. This will cause them not to affect the layout of the text unless they actually run into it. You'll need a rule for each level of the list, but that's just kind of endemic to nested lists in CSS*.
ul {
padding: 0;
margin: 0;
list-style-type: none;
}
li {
margin-left:1em;
padding-left: 0;
}
li li span {
display: block;
float: left;
margin-left: -2em;
}
li li li span { margin-left: -3em; }
I just tested it in the horribly broken IE 5 for Mac and it worked perfectly, so I assume newer versions should be OK, unlike solutions using pseudo-elements and generated content (which are stylistically superior but break in Explorer <8).
* Repetitive CSS like this can be trivially generated — a quick Ruby one-liner would be (2..10).each {|n| puts("#{'li '*n}span {margin-left: -#{n}em}")}, with 10 replaced by the number of levels