I guess I am not getting css child combinators.
I am trying to target just the first level on the li's with the following:
ul > li { color: green; }
<ul>
<li>Home</li>
<li>
Products
<ul>
<li>Product 1 </li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</li>
<li>Contact</li>
<li>News</li>
</ul>
http://jsfiddle.net/5vB3h/
NOTE: I also tried removing the spaces between >, with no luck.
You're using them fine, but all (properly marked-up) <li>s are children of <ul>s. You can specify the parent (in your jsFiddle, body):
body > ul > li
Or reverse the styles with the more specific case:
li ul > li {
color: black;
}
In the case of color, you need to use the second option anyways, because color is inherited. Here's the updated jsFiddle.
Your rule targets the child list items of any list. What you can do is create a second rule to recolor the other sub list items. For example:
ul > li {
color: green;
}
li li {
color:black
}
jsFiddle example
ul will match all the <ul> elements. Since every <li> is a child of one of the <ul>s…
You need to be more specific about which <ul> you mean. Perhaps add a class to it.
ul > li will select all the li elements in your document because they are all the children of ul elements.
If you apply a class to the parent like <ul class="top">, then you can use ul.top > li.
Add a class
li {color: blue;}
/* ^ added because maybe initial property is color: inherit;
If not, someone correct me */
ul.a > li { color: red; }
After this, add class to ul like <ul class="a" ...
http://jsfiddle.net/5vB3h/7/
EDIT (worked it out):
Okay so I ballsed up. Below is wrong.
ul:first-child > li { color: green; }
I found that when applying:
div>ul>li{color:green}
all lis went green... turns out that the li magically inherit the color of the li (odd behaviour as I assume the content had color:#000)
anyway... You need to explicitly set the color: to soemthing other than green to see the style working.
fiddle here
//html
<div>
<ul>
<li>Home</li>
<li>
Products
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</li>
<li>Contact</li>
<li>News</li>
</ul>
</div>
//css
li {color:black} //you have to have this (or something like * {color:black} OR body/html {color:black} as li seem to automatically inherit parent li color property
div>ul>li{ color: green; } //have to have parent.
Related
In my <ul> list I have several <li> with <a> tags in them.
I want to change the color of the li bullet icons when hovering on the <a> tag (I mean bullets beside <li>)
I tried
a:hover {
color:red;
}
but it doesn't affect the<li> bullet icon.
I also tried
ul li:hover{
color:red;
}
But it doesn't work perfectly because when mouse move to near <a> tag and not on it <li> and the bullets starts to change color.
your code actually worked for me.
<ul>
<li>
A
</li>
<li>
B
</li>
<li>
C
</li>
</ul>
CSS:
ul li:hover{
color:red;
}
Fiddle: https://jsfiddle.net/tox9je8n/
I have tried something related to your question and it works fine. To fix the issue of li:hover not hovering link, you should set to display:block, as below, so that it takes full width.
ul li a {
color: black;
display: block
}
ul li:hover {
color: red;
}
ul li:hover a {
color: black;
}
<ul>
<li>Value 1</li>
<li>Value 2</li>
<li>Value 3</li>
</ul>
The questions below pertain to sample HTML / CSS code below:
ul {
display: inline-block;
list-style: none;
}
li {
color: #000;
}
<ul>
<li>Home</li>
<li>Portfolio</li>
</ul>
When choosing to format and style a navigation menu that was created using an unordered list, what is the difference of using ul selector to target the lists versus targeting the li selector directly?
Is there an appropriate time when I should only use ul selector instead of li, and vice versa? In other words, are there properties that only work on the ul level. And on the li level?
First of all, there are things you simply cannot do selecting ul (I mean with pure CSS solutions, omitting preprocessors):
li { color: blue; }
li:first-child, li:last-child { color: red }
and so on with :pseudo-classes.
Main point in selecting whole container and targeting nested elements is just much less writing. Compare:
<ul>
<li class="my-superior-class-name"
<li class="my-superior-class-name">A</li>
<li class="my-superior-class-name">A</li>
<li class="my-superior-class-name">A</li>
<li class="my-superior-class-name">A</li>
<li class="my-superior-class-name">A</li>
<li class="my-superior-class-name">A</li>
<li class="my-superior-class-name">A</li>
</ul>
with:
<ul class="my-superior-class-name">
<li>A</li>
<li>A</li>
<li>A</li>
<li>A</li>
<li>A</li>
<li>A</li>
<li>A</li>
</ul>
Main difference in targeting ul and li with your CSS styles is that targeting deeper nested elements has bigger priority.
Unorderd list's default styles are:
ul {
list-style-type: disc;
list-style-position: inside;
}
So this are kind of properties which work only on ul lvl. But consider situation, when you set padding on the ul: Does every single ul child gets the same padding? There comes inheritance.
Overall, one advice: just don't overcomplicate it and use what you feel is simplest to understand and come back to for you.
Not every property is inherited implicitly, in fact in OP's code there's proof. The property display:inline-block is applied to <ul> yet the <li> will not inherit the display:inline-block from <ul> unless it does so explicitly by using display:inherit on the <li> (Might as well use display: inline-block on the <li> anyways since both options take the same effort to write.)
There are circumstances in which it would behoove us to target a <ul> over it's <li> such as the properties that are inherited implicitly: font-size, color, visibility etc.
SNIPPET
ul {
display: inline-block;
list-style: none;
}
li {
color: #000;
}
ul:last-of-type {
display: block;
}
ul:last-of-type li {
display: inline-block;
}
<h5><mark><code>ul { display:inline-block; }</code></mark></h5>
<ul>
<li>Home</li>
<li>Portfolio</li>
</ul>
<h5><mark><code>li { display:inline-block; }</code></mark></h5>
<ul>
<li>Home</li>
<li>Portfolio</li>
</ul>
I am trying to render a background color on the list item that is the first child of the unordered list.
HTML structure is as follows
<div class="nav-collapse">
<ul class="nav">
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
</ul>
</div>
and to apply the background color on the first child element I did
.nav-collapse > .nav:first-child {
background-color: orange;
}
It renders orange background to all list items.
I've played with slight variations but it doesn't make difference.
.nav-collapse > ul.nav:first-child
.nav-collapse > ul:first-child
Here is the Demo
Use the following:
.nav > li:first-child {
background-color: orange;
}
Working jsFiddle here
You were trying to style the first .nav item - which there is only one of. Simply change it to style the first li that is a direct child of .nav.
If you want to be more specific use:
.nav-collapse > .nav > li:first-child {
background-color: orange;
}
You can do it in many ways, try this too
ul.nav > li:first-child {
background-color: orange;
}
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 ;
}
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