<ul id="main-menu">
<li>111
<ul id="sub-menu">
<li>sub-111</li>
<li>sub-222</li>
<li>sub-333</li>
<li>sub-444</li>
</ul>
</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<style>
ul#main-menu li:nth-child(2n) {
color: red;
}
</style>
this is a demo
http://cssdeck.com/labs/emxvbal4
This effects the sub items also !!
How can I target only the li's of the main-menu without touching the li's of the sub-menu
Use the child combinator (>) instead of the descendant one ():
ul#main-menu > li:nth-child(2n)
Use direct children selector:
#main-menu > li{
}
Use immediate children selector ">".
ul#main-menu > li {
<your_css_style>
}
For more info., check this LINK.
Related
I have a menu consisting of nested ULs and LIs, eg:
.wrapper > ul:first-child > li:last-child {
color: red;
}
<div class="wrapper">
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolar</li>
<li>Style me!
<ul>
<li>Lorem</li>
<li>Don't style me!</li>
</ul>
</li>
</ul>
</div>
I want to add a style to the last <li> of the first <ul>, but not have it's children (the nested <ul>) inherit it.
I have tried:
.wrapper > ul:first-child > li:last-child {/*styles*/}
but this still styles the last element.
Would anyone know how I can target just that 1 element (with just CSS)?
Some CSS properties are inherited and you can't prevent that.
Inheritance propagates property values from parent elements to their children.
Some properties are inherited properties, as defined in their
property definition table. This means that, unless the cascade results
in a value, the value will be determined by inheritance.
However, you can override that by selecting the children and restoring the desired value.
.wrapper > ul:first-child > li:last-child {
color: red;
}
.wrapper > ul:first-child > li:last-child > * {
color: initial;
}
<div class="wrapper">
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolar</li>
<li>Style me!
<ul>
<li>Lorem</li>
<li>Don't style me!</li>
</ul>
</li>
</ul>
</div>
I want to select the first li without class="test" using :not and :first-child pseudoclasses. In this example I try to set color blue to <li>Third</li>:
ul li {
color:red;
}
ul li:not(.test):first-child {
color:blue;
}
<ul>
<li class="test">First</li>
<li class="test">Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
Why not do the below, which uses a combination of rules to filter the item you need (you can combine rules #1 and #3).
This has the added advantage of it not mattering what the index is of the first item with the class .test
ul li { /* <-- select all list items */
color: red;
}
li:not(.test) { /* <-- select all list which arent test */
color: blue;
}
ul li:not(.test) ~ li { /* <-- select all list items which follow an item without test */
color: red;
}
<ul>
<li class="test">First</li>
<li class="test">Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
I'm developing a css Tree view and I want, if is possible, to keep the hover effect only on the element that has children:
<ul>
<li><span>Item 1</span>
<ul>
<li><span>Item 1.1</span></li>
<li><span>Item 1.2</span></li>
<li><span>Item 1.3</span></li>
</ul>
</li>
</ul>
What I've done in css was:
.treeview li>ul>span:hover, .treeview li>ul>span:hover+ul li span {
background:#eee;
border:1px solid #94a0b4;
color:#000
}
but this doesn't work like I expected.
You want the :hover effect only inside the "Item 1" right?
.treeview > ul > li:hover > span {
color: red;
}
Also check this Fiddle.
UPDATED (based on your comment)
.treeview li:hover > span {
color: red;
}
And updated Fiddle. This however will also trigger the span on "Item 1.1.1" when hovered...
Is that what you want ?
http://jsfiddle.net/Defoncesko/p63b9/
HTML
<div class="treeview">
<ul>
<li><span>Item 1</span>
<ul>
<li><span>Item 1.1</span></li>
<li><span>Item 1.2</span></li>
<li><span>Item 1.3</span></li>
</ul>
</li>
</ul>
</div>
CSS
ul ul li:hover {
background-color:#eee;
border:1px solid #94a0b4;
color:#000
}
I think this is what you want. I added another larger li in my fiddle so you can see.
.treeview ul>li>span:hover {
background:#eee;
border:1px solid #94a0b4;
color:#000
}
.treeview ul>li>span ~ ul>li>span:hover {
background:#fff;
border:none;
color:#000
}
Demo:http://jsfiddle.net/QdEEf/1/
Edit: Actually If im truly understanding your question. Youre looking for a way to determine if the li has a ul as a child then give that li a hover if it does. If this is the case youre gonna need to use javascript to determine if it has a ul child. There is no way to do this with CSS
My HTML structure is as per the following:
<nav class="main-nav">
<ul>
<li class="gallery-collection">
Welcome <!-- Hide this -->
</li>
<li class="page-collection">
About
</li>
<li class="gallery-collection">
Support
</li>
...
How do I hide the first element saying "Welcome" using CSS? Note that 2 elements have the same class here: 'gallery-collection'.
Max compatibility:
.main-nav li {
display: none;
}
.main-nav li + li {
display: list-item;
}
Less compatibility, but not too bad:
.main-nav ul li:first-child {
display: none;
}
With CSS only (as your question was only tagged css):
.main-nav li:first-of-type
{
display:none;
}
The :first-of-type selector is supported in all major browsers, except IE8 and earlier.
i have nested lists with links inside the li tags. On nesting level x I want to change the appearance of the links. Just some sample code:
CSS:
.blue a { color: blue; }
.red a { color: red; }
HTML:
<ul>
<li class="blue">blue-1</li>
<li class="red">red-1</li>
<li class="blue">blue-2
<ul>
<li>
blue-3
<ul>
<li class="red">
red-2
<ul>
<li>red-3</li>
<li>red-4</li>
</ul>
</li>
<li>blue-4</li>
</ul>
</li>
<li class="">blue-5</li>
</ul>
</li>
<li class="red">red-5
<ul>
<li>red-6</li>
<li>red-7</li>
</ul>
</li>
</ul>
In that way it is working as expected. Links with text red-* are in red. But when I change the order of the CSS classes, it is not longer working:
.red a { color: red; }
.blue a { color: blue; }
Why this behavior? Shouldn't it be the same?
I have to use more colors than red and blue, so it is impossible to give a correct order in CSS.
Css selector precedence is set according to how specific it is:
every tag is counted as 1 point
every class as 10 points
event id as 100 points
Both selectors you got have the same precedence, so that one which is set further in code overrides previous ones.
The reason for this is that in your css you're telling every a tags that are child, grandchild, etc. elements of a class named blue. And that's getting overidden when you're telling that every a tags that are child, grandchild, etc. elements of a class named red should be red.
So instead of doing this (affecting all link tags)
.blue a { color: blue; }
.red a { color: red; }
You could do this (affects only the first child if it's a link tag):
.red > a,
.red > ul > li > a{ color: red; }
.blue > a,
.blue > ul > li > a { color: blue; }
What that second line does is it finds all elements that has a class name red. Then it finds all direct child ul elements. And under those matching elements it finds all direct child li elements that has direct child a elements. Matching these, it finally adds styles.
JSFiddle:
http://jsfiddle.net/Y9jFr/