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 {
...
}
Related
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>
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 navbar that contains a menu nested 3 times. So I have a div with id="navbar", which contains an ul, that has a li item with id="menu", that contains another ul, that contains more li items. Now I want to target every ul seperately, to add some JS code to it, make the first layer display in a row and so forth. So far I've only managed to target the first level, and the third one, but haven't been able to change properties of the second one. Somehow #navbar ul li goes to the first one, but #navbar ul li ul li targets the third. What am I doing wrong?
HTML:
<div id="navbar">
<ul>
<li>IJS</li>
<li class="ion-navicon-round" id="menu"></li>
<ul>
<li>knjižnica</li>
<li>zaloga
<ul>
<li>novi izvodi tiskanih revij</li>
<li>elektronske revije</li>
<li>katalog</li>
<li>baze podatkov</li>
</ul>
</li>
<li>storitve
<ul>
<li>medknjižnična izposoja</li>
<li>fotokopirnica</li>
</ul>
</li>
</ul>
<li>ENG</li>
</ul>
</div>
CSS:
#navbar {
background-color: #913D88;
color: #fff;
font-size: 1.5em;
}
#navbar ul li {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
#navbar ul li a:link, #navbar ul li a:visited {
color: #fff;
text-decoration: none;
}
#navbar ul li ul li {
display: none;
}
Small mistake. Your second level ul are outside of li elements instead of inside.
The problem is there in the following code.
<li class="ion-navicon-round" id="menu"></li>
<ul>
<li>knjižnica</li>
<li>zaloga
<ul>
<li>novi izvodi tiskanih revij</li>
<li>elektronske revije</li>
<li>katalog</li>
<li>baze podatkov</li>
</ul>
</li>
<li>storitve
<ul>
<li>medknjižnična izposoja </li>
<li>fotokopirnica</li>
</ul>
</li>
</ul>
Should be like this.
<li class="ion-navicon-round" id="menu">
<ul>
<li>knjižnica</li>
<li>zaloga
<ul>
<li>novi izvodi tiskanih revij</li>
<li>elektronske revije</li>
<li>katalog</li>
<li>baze podatkov</li>
</ul>
</li>
<li>storitve
<ul>
<li>medknjižnična izposoja</li>
<li>fotokopirnica</li>
</ul>
</li>
</ul>
</li>
DEMO
you have an error in your syntax.
the second "ul" is not in an li, because you close the li before it.
so try
#navbar ul ul li {
background-color: #ffff00;
}
I am using menu from UI
I have this ul
<ul id="menu">
<li>Loans</li>
<li>
Bancassurance
<ul>
<li>Aman el darb</li>
<li>Aman el elem</li>
<li>Aman el ghad</li>
</ul>
</li>
<li>
Services
<ul>
<li>Audi Mobile</li>
<li>Pin-Pay</li>
<li>ADSL Services</li>
<li>Bill Payment</li>
<li>Internet Accesses</li>
</ul>
</li>
<li>
Accounts
<ul>
<li>Wedding Account</li>
<li>Payroll Account</li>
<li>Saving Account</li>
<li>Current Account</li>
</ul>
</li>
</ul>
My CSS :
.ui-menu-item { }
This select all li from <ul id="menu">
How should the css selector look like so I can select the submenu `ul inside of #menu
According to your script use this .ui-menu-item #menu ul{ }
You can write like this
#menu ul li a{ css here}
DEMO
or
#menu ul li{ css here }
DEMO 2
If I am understanding your question correctly, you will need this
#menu ul {
}
If you need to target a specific UL inside of #menu, you should add an ID or Class to that particular UL and then reference it with this
#menu #example {
}
You can take it a step further and target each LI in the same fashion, like this
#menu #example li {
}
Hope this helps!
Selecting the UL inside of #menu is pretty simple:
#menu ul { /*CSS HERE*/ }
In css how would I change on hover the color of test 1 but not color of list 1, 2,3?
<ul>
<li>
test 1
<ul>
<li> List 1</li>
<li> List 2</li>
<li> List 3</li>
</ul>
</li>
</ul>
One way is to specify the "default" color:
li:hover {
color:#f00;
}
li, li:hover li {
color:#000;
}
http://jsfiddle.net/D8dwt/1/
Another (cheat?) is to use more markup to wrap the content you want styled on hover:
li:hover span {
color:#f00;
}
<ul>
<li>
<span>test 1</span>
<ul>
<li> List 1</li>
<li> List 2</li>
<li> List 3</li>
</ul>
</li>
</ul>
This is one way to go:
ul > li {
color: red;
}
ul > li:hover {
color: blue;
}
ul > li:hover > ul > li {
color: red;
}
Add test1 into a div element so that it is in a separate leaf.
css:
div:hover {
color: blue;
}
Although there may be a way to do this without modifiying the html..
Give it it's own class and define it in your CSS file.
<li class="yourclass">
Or put it in tags and define the link in your CSS
li.yourclass a:hover {
text-decoration: underline ;
}