ul > li (selector) doesn't work. What am I missing here?
/* Part 1 */
ul > li{
margin-top:30px;
}
/* Part 2 */
/* ul .test{
margin-top:30px;
} */
<ul>
<li class="test">item1</li>
<ul>
<li>subitem1</li>
<li>subitem2</li>
</ul>
<li class="test">item2</li>
<li class="test">item3</li>
</ul>
https://jsfiddle.net/gy5r3noh/
Shouldn't Part 1 and Part 2 in css be equal? But It isn't. ul > li should select all li children of ul (like class=test I created), but it doesn't work by ul > li.
Ignoring the fact that your HTML is invalid as j08691 has pointed out, and assuming your inner ul is intended to be wrapped in a li element:
ul > li selects any li element which is a child of any ul element.
ul .test selects any element with a class of "test" contained within any ul element.
One and two give different results with your HTML structure because your nested ul does not contain li elements with a class of "test". Example one applies to both the outer and inner ul elements, whereas example two only affects the li elements with a class of "test" (which there are none of within your nested ul).
you HTML is invalid, ul can't have ul as direct child
ul > .test {
margin-top: 30px
}
<ul>
<li class="test">item1
<ul>
<li>subitem1</li>
<li>subitem2</li>
</ul>
</li>
<li class="test">item2</li>
<li class="test">item3</li>
</ul>
/* Part 1 */
ul > li{
margin-top:30px;
}
/* Part 2 */
/* ul .test{
margin-top:30px;
} */
<ul>
<li class="test">item1</li>
<ul>
<li>subitem1</li>
<li>subitem2</li>
</ul>
<li class="test">item2</li>
<li class="test">item3</li>
</ul>
Here, Html Should be like,
<ul>
<li class="test">item1
<ul>
<li>subitem1</li>
<li>subitem2</li>
</ul>
</li>
<li class="test">item2</li>
<li class="test">item3</li>
</ul>
Related
How can I select the elements li, children of the element nav > ul?
As you can see in the following snippet, I can select nav > ul and remove the listing style. However, I can't manage to change the color of only Link1, Link2 and Link3.
nav > ul {
list-style: none;
}
nav > ul li {
color: red;
}
<nav>
<ul>
<li>
Link1
</li>
<li>
Link2
</li>
<li>
Link3
</li>
<li>
<ul>
<li>
Link3-1
</li>
<li>
Link3-1
</li>
</ul>
</li>
</ul>
</nav>
The answer nav > ul > li does not work, according to this JSFiddle. To people down voting the question, could you at least provide a reason?
There are four different combinators in CSS3, in this situation we used two of them:
Descendant Selector (selectors separated by 'space')
Child Selector (selectors separated by '>')
So "nav > ul > li" (select the four LI presents on the first UL),
and then applies the color red, consequently all text color becomes red.
As the second UL is a child of fourth LI it gets red too.
To fix that we need create a rule for all the subsequent UL's.
nav > ul {
list-style: none;
}
nav > ul > li { /* only direct children */
color: red;
}
nav > ul ul { color: black; } // resets the color of the nested ULs
Give them class names like:
<li class = "red_font">
then change your CSS to:
.red_font{
color:red;
}
This code ran, I think the li inside that parent li element inherit the color thus the color goes to all li elements.
I'd suggest you specify with another selector like id or class to make it easier to specify the elements you want to manipulate.
nav > ul {
list-style: none;
}
ul > li {
color: red;
}
li > ul li{
color: black;
}
<nav>
<ul>
<li>
Link1
</li>
<li>
Link2
</li>
<li>
Link3
</li>
<li>
<ul>
<li>
Link3-1
</li>
<li>
Link3-1
</li>
</ul>
</li>
</ul>
</nav>
there are many ways to achieve what you want, here is another way which is not yet presented in the other answers:
add a class "skip" to the li which contains the 2nd level of links, and skip it in your css using the :not selector:
nav > ul {
list-style: none;
}
nav > ul > li:not(.skip) {
color: red;
}
<nav>
<ul>
<li>
Link1
</li>
<li>
Link2
</li>
<li>
Link3
</li>
<li class="skip">
<ul >
<li>
Link3-1
</li>
<li>
Link3-1
</li>
</ul>
</li>
</ul>
</nav>
It happens because you're selecting every children. See the solution below:
nav > ul {
list-style: none; /* This will disable listing styles */
}
nav > ul > li {
color: red; /* this will select Link1, Link2 and Link3 (first level) */
}
nav > ul > li > ul {
color: #000; /* this will select Link3-1 and Link3-2 (second level) */
}
<nav>
<ul>
<li>
Link1
</li>
<li>
Link2
</li>
<li>
Link3
</li>
<li>
<ul>
<li>
Link3-1
</li>
<li>
Link3-2
</li>
</ul>
</li>
</ul>
</nav>
I have a class specified for a list:
.nav ul li.current {
background: #fff;
}
The problem is, I only want to style the parent li element, not any children.
<div class="nav">
<ul>
<li>Something</li>
<li class="current">Something else</li> <!-- apply class here -->
<li>
<ul>
<li>Child something</li>
<li class="current">Child something else</li> <!-- ...but not here -->
</ul>
</li>
</ul>
</div>
The CSS pasted above is changing the background for both li elements with the class "current". How do I correct this?
.nav > ul > li.current { ... }
.nav > ul > li.current {
...
}
this is my html file:-
<div id="load">
<ul>
<li>Activities
<ul>
<li>Physical1
<ul>
<li>Cricket
<ul>
<li>One Day</li>
</ul>
</li>
</ul>
</li>
<li>Test1
<ul>
<li>Test At Abc</li>
</ul>
</li>
<li>Test2
<ul>
<li>Test At Xyz</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
i want to set in to css hover.
i dont konw about css hover much so give me suggestion for this.
this is my output i needed.
hover in Acvivities display
Physical1
Test1
Test2
hover in Physcial1 display Cricket...
thanks...
ul > li > ul {
display: none; // hide all submenus
}
li:hover > ul {
display: block; // show sub menu when parent li is hovered
}
DEMO
ul li ul
{
display:none;
}
ul > li:hover > ul
{
display:block;
}
http://jsfiddle.net/AyLYe/
I won't provide the whole code, but with this base you can adapt the code to display the rest of what you need.
Before we start, see this tutorial I found with a google search: http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu I scanned it at a glance and it looks pretty good, it will at least guide you through the concepts and the process.
Here's a JSFiddle:http://jsfiddle.net/Kq7vD/
Heres the CSS that makes it work:
#load ul li ul {
display: none;
}
#load ul li:hover ul {
display: block;
}
Note that by removing #load you can cause this to work across every list in your menu. The downside to this is that the css rules then apply to every list on your site, even if it shouldn't be a menu. It is recommended that you keep your rules relatively specific for this reason.
EDIT to address your comment:
If your HTML structure includes a DIV before each UL, even the nested UL's then your css rules will need to adapt to that new structure. In particular, it's also important to note that you will not set the UL to display: none/block; anymore but the DIVs.
Assuming a structure like:
<div id="load">
<div>
<ul>
<li>
<div>
<ul>
<li></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
Your code would then look like...
#load div ul li div {
display: none;
}
#load div ul li:hover div {
display: block;
}
I have a <ul id="islist"> with the according css:
#islist {
list-style-image: url('../img/img.png');
}
#islist * li {
list-style-type: none;
}
Then, within this , there's another one:
<ul id="islist">
<li>title</li>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
</ul>
</ul>
The problem is that all <li> elements have the image setup, not only the title.
How can I solve this?
Your html is invalid you cant have a ul as a child of a ul, place the ul in an li and then the styles will be applied to the nested lis.
<ul id="islist">
<li>title</li>
<li><ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
</ul>
</li>
</ul>
also I think you want to use list-style: none; instead of list-style-type:none;
DEMO
The problem is that the style is applied to the ul, not to the li.
Change the CSS as follows:
#islist {
list-style-image: url('../img/img.png');
}
#islist ul {
list-style-type: none;
}
I have a nested UL navigation list, with ul's contained inside some other li elements. here's the mark up:
<ul class="navigation">
<li>No Chidren</li>
<li>With Chilren
<ul>
<li>Child 1</li>
<li>Child 2</li>
</ul>
</li>
</ul>
I tried styling it with some of the following CSS declarations:
.navigation {
//stylings
}
.navigation li{
//stylings
}
.navigation li a{
//stylings
}
.navigation li a:hover{
//stylings
}
but the .navigation li affects all of the list elements, including the children. is there a way to target the lis so that the styles are only applied to the top-level ones, and not the children?
As others have mentioned, the > selector will only select direct children. However, this doesn't work in IE 6.
If you need to support IE 6, you can add a class to child uls or lis, and use that to remove the styling cascading from the top li:
<ul class="navigation">
<li>No Chidren</li>
<li>With Chilren
<ul class="level1">
<li>Child 1</li>
<li>Child 2</li>
</ul>
</li>
</ul>
--
.navigation li{
background: url(bg.png);
}
.navigation .level1 li{
background: none;
}
Like this, the ">" states that the li must be a direct child of .navigation
.navigation {
//stylings
}
.navigation > li{
//stylings
}
.navigation > li a{
//stylings
}
.navigation > li a:hover{
//stylings
}
Yes, it is possible with child selectors.
.navigation>li>a{
//stylings
}
Code above will affect "No Chidren" and "With Chilren" link but not "child 1" element.
Here is working example: http://jsfiddle.net/VuNwX/
And here you can read more about selectors: http://css.maxdesign.com.au/selectutorial/index.htm