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>
Related
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;
}
So I have some code that looks like:
<ul>
<li>
<ul>
<li> ... </li>
</ul>
</li>
</ul>
This has indented itself. I have no styling to indent this. According to the computed styling there is no margin-left, yet everything is actually indented, I guess this is the default behaviour of nested ul elements?
Regardless, on every nested ul, I have a class that is called comment-children I need to say only 5 down can indent (so .comment-children .comment-children .comment-children .comment-children .comment-children done, great) but at a width of 640px, all nesting must be turned off.
The part I am having the trouble with is that the ul elements are nested by default http://jsfiddle.net/d7az0jv3/
What do you want to do
Remove all default nesting and let me nest it my self via the class comment-children
At 640px remove all nesting.
Your example is insufficient to demonstrate what you want to do involving the class comment-children, but generally, to remove the indentation on lists across browsers, you should implement the rules
ul, li { margin-left: 0; padding-left: 0; }
Here's an updated jsfiddle
If you want to only nest elements up to a certain level, my recommendation would be to apply a class to the base ul that sets the indentation, and then add a rule that stops the indentation at a certain depth below that base class. Here is an updated version of your code with the nesting stopping at level 5.
HTML:
<ul class="comment">
<li>level one</li>
<li>
<ul>
<li>level two</li>
<li>
<ul>
<li>level three</li>
(etc., up to level seven)
CSS:
ul {
list-style:none;
}
ul, li { /* reset the margin and padding */
margin: 0;
padding: 0;
}
.comment ul {
/* 1 em margin for the UL elements under .comment */
margin-left: 1em;
}
.comment ul ul ul ul ul {
/* stop the nesting! */
margin-left: 0;
}
jsfiddle for this
When I'm trying to select all direct child of a parent element using ">", it works with some properties like border and all, but not with font-properties like color, font-weight etc..
My HTML is
<ul>
<li>Item 1</li>
<li>
<ol>
<li>Subitem 2A</li>
<li>Subitem 2B</li>
</ol>
</li>
</ul>
CASE1 CSS:
ul>li {
color:#F00;
}
But here the color:#F00 property gets applied to all the "li" elements, But i want it to get applied only for the direct "li"s of "ul".
CASE 2
CSS:
ul>li {
border: solid 1px #000;
}
This one works well for me and the border gets applied only to the direct li child only.
I know it can be resolved by overriding with some other classes and all. But i want to know, why some css properties get inherited and others not.
It's happening due to the default inheritance capability of certain CSS Properties. Values of these kind of properties will be transmitted to the child by default.
This document from W3C gives detailed list of inheritance in various CSS properties. Full property table
try this
Demo
<ul>
<li>Item 1</li>
<li>
<ol>
<li>Subitem 2A</li>
<li>Subitem 2B</li>
</ol>
</li>
</ul>
css
ul > li {
color:#F00;
}
ul > li > ol > li {
color:#000;
}
try this
ul > li ol li {color:black;}
As the listing element has been inheriting the color property from its parent, you need to override it.
You can add below style before yours as like
li {
color: #000;
}
ul>li {
color:#F00;
}
It overrides the color: inherit value.
I think you might find the answer you need here: http://www.w3schools.com/cssref/sel_firstchild.asp
You should be able to select these elements with
ul:first-child {
// css
}
Hope this helps
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 been trying to learn horizontal lists in html. I have the following code,
CSS:
#list li
{
text-decoration:none;
display: inline;
list-style-type: none;
padding-right: 20px;
}
</style>
HTML:
<div >
<ul id="list">
<li>Store </li>
<li>Mac </li>
<li>IPod </li>
<li>IPhone </li>
<li>IPad </li>
<li>ITunes </li>
<li>Support </li>
</ul>
</div>
When I put the id in the div tag (<div id="list">)then it does not show the list horizontally while the current code displays the list horizontally. I don't get the reason behind it. Please help me clear the concept. Thanks
Because a div is not a list element. It has no list-style-type, so it won't change the bullets on any lists within the div. And an 'inline' display type does not propagate down the DOM tree from a parent node, so the inline applies only to the div itself and won't affect the list or li elements.
It works just fine if you put the ID on the div element as well.
Have a look at this fiddle: http://jsfiddle.net/sKaYm/
Your CSS selector #list li says "apply this to any list element that is child of an element with ID 'list' - no matter if it is an immediate child or not." - So basically it doesn't matter how many levels of div's or other elements you wrap around your list, it will still select it.
According to this jsFiddle it works.
list-style-type only changes the marker in front of the item.
to create cross browser horizontal list add float left to each list item :
#list li
{
text-decoration:none;
display: inline;
list-style-type: none;
padding-right: 20px;
float:left;
}