This question already has answers here:
Closed 11 years ago.
Possible Duplicates:
Style parent li on child li:hover.
Is there a CSS parent selector?
I have a nave menu.
On li a:hover the #drop-down-menu appears.
Can I apply a style to the li a while hovering over the drop down menu?
Can you apply a style to the parent element while hovering over the child element?
i.e. I want a border-bottom:2px solid #ffffff; to appear under the li a, while i am hovering over the #drop-down-menu.
Can't figure it out.
If your anchor is - or can be - fullsize (i.e. the size of the list item), then you can use:
li:hover
You would need to use javascript for this. CSS doesn't allow any way to select a parent element.
No. CSS doesn't work that way. You can only go down.
However, if you have your HTML structured properly, you can achieve the effect you're going for.
Assuming the following HTML:
<ul id="main">
<li>A dropdown
<ul class="dropdown">
<li>A submenu</li>
</ul>
</li>
</ul>
You can have the following CSS, and it should work:
#main li:hover a {
border-bottom: 1px solid black;
}
Here's a (very) rough Fiddle.
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 8 years ago.
<div>
<ul>
<li>Do something with this element</li>
<li></li>
</ul>
<ul id="someId">
<li>This element:hover</li>
<li></li>
</ul>
</div>
I wonder if it is possible to select the first li element of the first ul if I hover on the first li element of the second ul element.
I've tried selectors like:
#someId li:first-of-type:hover:parent:parent ul:first-of-type li:first-of-type
But it obviously doesn't work. I want to avoid using JavaScript and changing the HTML structure is not an option. Adding classes and IDs isn't a problem.
Is this selector possible with CSS3?
Without JS you can't change dom elements. At first give id or class to ul, after it use jquery .hover () function. And use first-child element for getting li of ul.
http://jsfiddle.net/5DZSy/
I have the main menu links colored and fading the way I want, but the child menu links.. I am trying to make those Black and fade to a different color.. Im a complete newb with css.. and cant figure it out. Ive tried adding and changing classes, and gotten myself lost..
How could I change it so the main links stay like they are, but the child menus have a different color scheme?
The link above to jsfiddle has the html and css..
I appreciate any help and input! I know this is probably simple and something im overlooking, but thats why im here!
<ul id="menu">
<li>
Home
<li>
<hr class="menuhr">
<li>
Link #1
<ul>
<li>
Child A
</li>
<li>
Child B
</li>
</ul>
</ul>
css is on the jsfiddle link.. couldnt get it to paste and display right here, sorry!
Please add following styles at bottom:
ul#menu li > ul li a {
color: #000; /*your submenu link color*/
}
ul#menu li > ul li a:hover {
color: #555; /*your submenu link hover color*/
}
Look at here fiddle
Is this what you are looking for
http://jsfiddle.net/cancerian73/5DZSy/1/
#menu li ul li a{color:green}
I have a nested UL structure that represents a folder tree which can grow very deep. I'm stuck at doing a simple :hover effect for the LI elements. The problem is that doing a li:hover won't work as it affects all the parent "li's" aswell. Usually I would have tried to apply the hover effect to a link element or something in the LI, to avoid parents taking the style aswell, but due to circumstances that's not an option now. I have a working solution by using javascript to place a class on the hovered LI and then style this class instead, but i'm really interested in seeing if there's actually a way of accomplishing this through pure css.
I imagine there may be a way of doing a very "hardcoded" css solution but i am more interested in a dynamic and clean one, since the structure can nest indefinitely.
Maybe there's some pseudo selector i'm not aware of? Note that it doesn't have to be IE<8 compatible
<ul>
<li>
This LI should not recieve the hover effect
<ul>
<li>
A li:hover will place the effect on this LI,
but also the parent LI, since that element is
also techincally being hovered.
</li>
</ul>
</li>
</ul>
If you want to use pure CSS then you will need to us parent, child, elements.
For the hover elements:
ul li:hover{
"Style"
}
For the other elements:
ul li ul li{
"Style"
}
UPDATE: I just reread your question, in which you state:
"Usually I would have tried to apply the hover effect to a link
element or something in the LI, to avoid parents taking the style as
well, but due to circumstances that's not an option now."
If that is true, then the solution below is not viable for your circumstance, and you cannot achieve what you desire with pure CSS. I've left my answer, however, as others who want to achieve this but can use a nested element may find it useful.
Pure CSS Only by Adding HTML
The only way you can possibly achieve something of what you seek by pure CSS is to add an extra element (like a span) within the li and perform the hover on that. I assume that whatever folder is being hovered, that folder alone is what you want to highlight. If so, this fiddle illustrates what I am saying, using this code:
HTML
<ul>
<li>
<span>Folder 1</span>
<ul>
<li>
<span>Folder 1.1</span>
<ul>
<li>
<span>Folder 1.1.1</span>
<ul>
<li>
<span>Folder 1.1.1.1</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
li span:hover {
color: red;
background-color: yellow;
}
Now, if you want child folders to also highlight on hover of a parent folder, then perhaps this fiddle illustrates what you want with this code change:
CSS
li span:hover,
li span:hover + ul span {
color: red;
background-color: yellow;
}
They key point is to utilize the extra element to control the hover, whether of the item itself or any later generation elements that the hover should affect.
Not clear at all... but if you want to style nested LI when you are hovered the parent LI without styling the parent one...
Try this:
CSS
ul li ul li {
color: blue
}
ul li:hover ul li {
color: red
}
fiddle example: http://jsfiddle.net/EHp3n/
Your question is not very clear and also it will confuse. Let me explain, when the user hover the city (India / China / UK), style should be applied to State and Country through CSS.
<ul>
<li>India (Apply Style)
<ul>
<li>India State (Apply Style)
<ul>
<li>India City (On Hover)</li>
</ul>
</li>
</ul>
</li>
<li>China
<ul>
<li>China State
<ul>
<li>China City</li>
</ul>
</li>
</ul>
</li>
<li>United Kingdom
<ul>
<li>UK State
<ul>
<li>UK City</li>
</ul>
</li>
</ul>
</li>
</ul>
I have a unordered list with id of "navigation" and a few child list-item elements.
I am trying to select just the first item with :first-child but it is applying the CSS I use with this to all other list items.
ul#navigation li:first-child{
background:#fff;
}
So, to reiterate: this is giving every list-item a white background. I just want to select the first element. What is going wrong?
According to the comments, your problem is that your markup looks like this:
<ul id="navigation">
<a href="http://google.com">
<li>Google</li>
</a>
</ul>
Note how every li will be a :first-child under this model. I would suggest you go with the more appropriate structure of nesting your anchor within your list item. If you want the anchor to fill up the list item, set its display to block:
<ul id="navigation">
<li>Google</li>
</ul>
With the accompanying CSS:
#navigation a { display: block }
Once you have those structural changes in place, your selector should target the first list item:
/* > to target only immediate list items */
#navigation > li:first-child {
background: red;
}
I am creating a navigation bar right now and I want the width of the main elements on the navigation to be auto, but sub elements to all be a fixed width. The way the list is made is as such:
<li>Main Element
<ul>
<li> Sub Element </li>
<li> Sub Element </li>
<li> Sub Element </li>
</ul>
</li>
This is repeated for each main menu item and its submenu items.
The issue I am having is I want to css for the sub elements to be 100px in width, but the main elements to be equal to the text size plus 10px of padding on both the left and right. It appears I can not change one without changing both, even after attempting to make classes to separate them. I have also tried editting ul li and li ul styles in my external style sheet. Thank you in advance for all help.
ul li affects all li's at any level under an ul. ul > li only affects the li's that are direct children of an ul. It's called a child combinator: http://www.w3.org/TR/css3-selectors/#child-combinators
You must use it if you are to make it happen without using classes (using classes would actually be the better way imo - http://www.jsfiddle.net/joplomacedo/xeWA4 )
The trick is applying the styles you want applied on the main menu items under ul > li and then override them at ul ul > li. Here's a fiddle - http://jsfiddle.net/joplomacedo/xeWA4/3/
EDIT:
You actually don't need to use the child combinator at all. Child combinators came to my mind
when I first read your question, and I kind of never questioned their use. So, ul li overridden by ul ul li works perfectly as well - and keeps it simpler.