Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I was testing list-style-type changes for child lists and noticed something strange happening. When you try and change the properties of a child list by using a selector like li li it will not work. If you remove the topmost selector in my below example, all styles are removed. If you inspect the element, the styles aren't being applied at all so it's not as though something is overwriting them.
li {
color: purple;
}
li li {
color: red;
list-style-type: circle;
}
li li li {
color: blue;
list-style-type: lower-roman;
}
li li li li {
color: green;
list-style-type: square;
}
<ul>
<li>Parent List</li>
<ul>
<li>1st Child</li>
<ul>
<li>2nd Child</li>
<ul>
<li>3rd Child</li>
</ul>
</ul>
</ul>
</ul>
When you replace li with ul, it works as you'd expect the above to. Why does all of this happen? I've never seen behaviour like this before.
ul {
color: purple;
}
ul ul {
color: red;
list-style-type: circle;
}
ul ul ul {
color: blue;
list-style-type: lower-roman;
}
ul ul ul ul {
color: green;
list-style-type: square;
}
<ul>
<li>Parent List</li>
<ul>
<li>1st Child</li>
<ul>
<li>2nd Child</li>
<ul>
<li>3rd Child</li>
</ul>
</ul>
</ul>
</ul>
I am voting to close this as I'm an idiot and that's the extent of this. I'd hope you vote to close as well.
That's because using li li means a child li of an li. So in this case, that would apply to the second li below:
<li>
<li>foo</li>
<li>
However, in your example, the nested lists are not inside an li, but instead by themselves, so they are not the children of any li.
In your HTML, LIs are not getting nested in the LIs (they are not within each other - <li><li>...</li></li>. Hence, the styling of. li li {...} won't work at all.
The way your HTML is, it is nesting ULs. Hence, ul ul {...} styling will work.
Remember, in CSS to make li li work they should be nested within each other otherwise CSS won't work.
I would recommend just creating classes like .green .red .blue .purple and adding those classes to the <li> tags, because it has better re-usability.
I would recommend you to go trough the essentials of HTML5 again & work on your style of coding.
P.S Regarding your problem, here's another Stack that explains how to properly nest lists.
Related
I have nested uls like this:
<ul>
<li>1...</li>
<li>2...</li>
<li id="li_3">
<ul>
<li id="li_3_1">3.1...</li>
</ul>
</li>
<li>4...</li>
</ul>
li_3 displays a bullet but I don't want it to since its children li already do (there are 2 bullets side to side near li_3_1).
So I wanted to select all the li having a ul as a direct child, something like this:
ul < li {
list-style-type: none;
}
But of course the selector < doesn't exist. What solutions do I have?
If you want to remove list-style in nested ul, this selector may be helpful.
ul > ul {
list-style: none;
}
You could just call the li directly using it's ID in CSS using this code:
#li_3 {
list-style-type: none;
}
Or if there are multiple you could just add a class to every li you want the bullet removed from and use the same code.
working:
#li_3 {
list-style-type: none;
}
<ul>
<li>1...</li>
<li>2...</li>
<li id="li_3">
<ul>
<li id="li_3_1">3.1...</li>
</ul>
</li>
<li>4...</li>
</ul>
Found it:
li:has(ul) {list-style-type: none;}
I'm having a hard time understanding why the behavior of certain properties do not follow the behavior stated in the W3 specification.
For example, in the specification it says that the "background-image" and "background-color" property is not inherited.
But the following code proves this otherwise.
The CSS
#nav > li {
background-color: yellow;}
The markup
<div>
<ul id="nav">
<li>This is a list</li>
<li>This is a list</li>
<li>
<ul>
<li>This is a list</li>
<li>This is a list</li>
</ul>
</li>
</ul>
</div>
You will see that even the 2nd level list items which is nested inside the 3rd list item also has their background-color changed, while I only intended for it to be applied only on the direct children which is the 1st level list items.
Now my question is this.
Why is this happening? Who is in the wrong here, the browsers or the specification? Am I missing something?
Any help is appreciated.
I think I found your answer.
When you look at the devtools, you will see, that the 2nd level got no background-color. The color you see, is the color of the parent li :-)
Fiddle
#nav > li {
background-color: yellow;
}
With the border property you can see it better.
Updated fiddle:
http://jsfiddle.net/2brhj2bq/1/
#nav li {
border:1px solid red;
}
#nav > li {
border:1px solid lime;
}
This is because the next UL is also in the Li , and li have bg color yellow so it should be yellow . just think it what have you done , you are assigning bg then you are seeking why it is happening it is not the bg of inner ul li it is the bg of ul#nav li.
I have a multi level navigation menu on my page consisting of an unordered list. That list has the class menu, like so:
<ul class="menu">
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3
<ul>
<li>Subcategory 1</li>
<li>Subcategory 2</li>
</ul>
</li>
</ul>
The href attributes are set to # for illustration purposes.
My question is: What is the best Selector to use for that kind of menu regarding speed?
At the moment I am using something along these lines (again, just for illustration, there are rules missing):
.menu {
background-color: #CCC;
}
.menu li {
background-color: #FFF;
}
.menu li > ul li ul {
background-color: #333;
}
Is a class the fastest selector in that case? Or should I use something like .navigation-container ul? Do you have any recommendations?
Simpler selectors are faster than complex selectors. For example .menu is faster than .menu ul, but it's no dramatic difference.
What you have is fine. You could perhaps try to make the .menu li > ul li ul less complex, but don't expect to notice any difference, because you could perhaps shave off a millisecond or two on the rendering time.
Here is some reading about efficient CSS seletors: http://csswizardry.com/2011/09/writing-efficient-css-selectors/
It's quicker to reference with an id, e.g. #menu, #menu li. I would also add an id to the sub ul tags too :)
**Thank you for your answers. I am waiting on a Cache plugin to be removed before I can test and confirm everythign is working correctly.
I have a unordered list that contains some sublist. All I want to update are the Children of the main <ul> "Names" and "Jobs"
<ul>
<li>Names
<ul>
<li>Mike</li>
<li>Bob</li>
<li>Steve</li>
</ul>
</li>
<li>Jobs
<ul>
<li>Police</li>
<li>Fire Fighter</li>
<li>banker</li>
</ul>
</li>
</ul>
I want the ability to only style the child <li>'s of my main <ul> not any of the sub items. The trick is I can not add any classes or id's to the list or sublist. I can put the whole thing in a containing div.
*NOTE if i add a class or ID to my it will add it to all of them. This is a premade template i have no control over.
I was thinking I could do this:
<div id="mylist_container">
<ul>
<li>Names
<ul>
<li>Mike</li>
<li>Bob</li>
<li>Steve</li>
</ul>
</li>
<li>Jobs
<ul>
<li>Police</li>
<li>Fire Fighter</li>
<li>banker</li>
</ul>
</li>
</ul>
</div>
And style it like this:
#mylist_container ul>l1{
font:bold 18px arial;
}
I think you answered your own question! Or at least 99% of the way. Create one more child selector by adding > between #mylist_container and ul. This will only target a ul that is a child of #mylist_container and not go any deeper in the structure.
#mylist_container > ul > li { /* your styles */ }
Try
#mylist_container > ul > li {
font: bold 18px arial;
}
#mylist_container > ul > li ul{
font: normal 10px arial; //assign the default view here
}
Demo: Fiddle
take a look at my code example.
The first targets all <li> and the second targets only <li> inside of another <li>.
ul>li{
any styles in here form the top level li
}
ul>li>ul>li{
styles to cancel out the first styles
}
try this..
div ul li ul li{
color:#000000;
}
div ul li{
color:red;
}
http://jsfiddle.net/Mk3g4/
I was wondering how can I keep my main parent category highlighted as when hovered on when viewing the main parents sub categories using CSS?
A quick example or tutorial will help thanks.
Your CSS would look something kind of like this:
.highlighted, a:hover {
/* styles for when the category is hovered or highlighted */
}
Then when viewing the subcategories you need to add the "highlighted" CSS class to the element that represents the parent category. How exactly you do this depends on how your website works, but it could be done with javascript or with server-side code.
EDIT 1: Yes, this can be done with just CSS, but it probably requires a lot of manual labor. If your website is just a bunch of static HTML files you could go in and edit each of them to highlight the parent class. For example, on the page entitled "Sedans" (a subcategory of cars) you could change
<div class="category">Cars</div>
to
<div class="category highlighted">Cars</div>
There should be nothing surprising or special about that to you.
You can use the code from CSS play 1 or CSS play 2 for this.
Each of examples meets your needs.
Main idea is to use pseudo-class for the base class:
#menu li a:hover {border:0; text-decoration:underline;}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {padding-bottom:15px;}
#menu li:hover dt a, #menu li a:hover dt a, #menu dd a:hover {color:#c00;}
http://jsfiddle.net/axCPq/
CSS:
.main-parent:hover a.parent { color: green; }
.child-ul a:hover { color: green; }
HTML:
<ul class="main-parent">
<li><a class="parent" href="#">Link Parent</a>
<ul class="child-ul">
<li>Link Child</li>
<li>Link Child</li>
<li>Link Child</li>
<li>Link Child</li>
<li>Link Child</li>
<li>Link Child</li>
</ul>
</li>
</ul>