I don't know how to do this: I want change color class = "dropdown-toggle" when I hover .dropdown-menu li
.dropdown-menu li:hover (or li > a) (~ or + or >) .dropdown-toggle {...} - its not working
Can I do it in CSS?
My code follows below:
<li class = "dropdown">
Lorem ipsum
<ul class = "dropdown-menu">
<li> Hellooooo </li>
<li class="divider"></li>
<li> Blablabla </li>
</ul>
</li>
There is currently no way to select the parent of an element in CSS.
If there was a way to do it, it would be in the CSS selectors specs, either CSS 2 or 3
CSS 3 Selectors Spec
CSS 2 Selectors Spec
You'll have to use js to do that.
EDIT: You could use the workaround that #Mr. Alien put in his answer.
I think you can also use Jquery for this.
jsFiddle
$(document).ready(function(){
var menuItem = $('.dropdown-menu li');
var itemToChange = $('.dropdown-toggle');
menuItem.on('mouseenter', function(){
itemToChange.css('background-color', 'red');
});
menuItem.on('mouseleave', function(){
itemToChange.css('background-color', '');
});
});
Hope this helps.
The best thing you can do here with pure CSS is
ul li.dropdown:hover > a {
background-color: red;
}
Demo
Over here, am selecting the anchor tag which is a direct child to li.dropdown on hover of the .dropdown which holds the sub ul
Related
I've managed to put a great looking menu togheter!`
<li class="huvudmenu">Framsida</li>
<li class="huvudmenu">
<a>Om oss</a>
<ul>
<li>Styrelsen</li>
<li>Historik</li>
<li>Stadgar</li>
<li>Topeliuspriset</li>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li class="huvudmenu">Verksamhet
<ul>
<li>Hangö seminariet</li>
<li>Årsberättelser</li>
</ul>
</li>
<li class="huvudmenu">Estholmen</li>
<li class="huvudmenu">Bli medlem</li>
`http://jsfiddle.net/hx6uvc19/ The setup I have does not, unfortunatley, work very well on touch screen devices. Is there any way I can keep the design while making it touch screen compatible?
Thanks!
You can not use the :hover pseudo class on mobile. In order to get this effect you can use JQuery as stated by #jbutler483 in the comments.
If you wanted to do this you could do it by adding an .active class to the main li's (By using the class .huvudmenu) on click/touchstart and add this to the css where you have your hover styles as well.
This is the JQuery:
$('.huvudmenu').on('click touchstart', function(e){
e.preventDefault();
$(this).toggleClass('active').siblings().removeClass('active');
});
and the styles to add are:
nav ul li.active > ul {
display: block;
}
and
nav ul li.active:after {
width: 100%;
background: #404040;
}
this will then allow the styles on click and touchstart events. If you wanted this to only run on mobile you could just remove the click and use touchstart events and/or put some kind of detection that this is a mobile device before initialising the JQuery function.
Here is an update to your fiddle: http://jsfiddle.net/lee_gladding/hx6uvc19/3/
I have following code for the Menu in wordpress:
<div class="menu-about-container">
<ul id="menu-about-1" class="nav-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-574">Our History</li>
</ul>
</div>
I want to give display:none to Our History.But want something like if it is child of menu-about-1 and menu-about-container then and then give display:none.
How can I do it?I know its very silly but I don't have any designing experience.So can any one guide me ?
Use standard CSS selectors to hide any menu item that is a child:
.menu-about-container #menu-about-1 li.menu-item { display: none; }
If that particular item is always menu-item-574 and you want to hide that one, only, use:
.menu-about-container #menu-about-1 li.menu-item-574 { display: none; }
if you only want to hide Our history you can use
#menu-about-1 li{display: none}
But that will hide al the list items so if you want to add others in the future, and you only want to hide the fist one you should use
#menu-about-1 li:first{display: none}
Add this to you css rules:
.menu-about-container > #menu-about-1 > li {
display:none;
}
The > targets the immediate child of the previous selector.
~ is for the following sibling selector.
How could il select the class .content in reference to the class .select ?
HTML
<ul>
<li> <a>content</a> </li>
<li> <a class="select">selected li</a> </li>
<li> <a>content</a> </li>
</ul>
<div class="content">
selected content
<div>
CSS (not working)
ul > li > a.select ~ .content {
/* something */
}
It's unfortunately not possible with CSS, but you could use JQuery, i.e. something like
<script type="text/javascript">
$(".selected").parent().parent().siblings(".content").css("color", "red");
</script>
$(".selected") you start at 'a' tag
.parent() move to parent 'li'
.parent() move to parent 'ul'
.siblings(".content") matches all siblings of the 'ul' you are currently at with class #content'
.css("color", "red") do whatever fancy css you like ;)
There's currently no way in CSS to select the class .content in reference to the class .select.
However if you change your markup a little you can do something similar to what you're trying to do using the target pseudo-class
FIDDLE
I have two HTML lists I need one to select my "active" class and the other to ignore it.
Here is my css, I show an image "icon-plus.gif" and when user click the li the image change to "icon-minus.gif"
li:before {content: url("icon-plus.gif");}
li.active:before {content: url("icon-minus.gif");}
And then I have a two lists, and all the li show the image "icon-plus.gif" when I click it image change.
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
<ul>
<li>Bread</li>
<li>Apples</li>
</ul>
both are showing the images!!! Really don't understand why, my idea it was having the class inside the li:
<ul>
<li class"active">Coffee</li>
<li class"active">Milk</li>
</ul>
Code was downloaded from internet.Thanks
Use JQuery:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$("li").click(function () {
// Remove active class from all li elements
$("li").removeClass("active");
// add the active class to your clicked on element
$(this).addClass("active");
});
</script>
javascript onclick() event and jquery's css manipulation may help you. Here is a useful link:
http://api.jquery.com/category/css/
<div id=menu>
<ul>
<li class="section-title">auto-text1</li>
<li class="section-title">auto-text2</li>
<li class="section-title">auto-text3</li>
</ul>
</div>
How can I give special treatment to auto-text3 through css?
See section 6.6.5.7. of the CSS3 - future - proposal:
:last-child pseudo-class
Same as :nth-last-child(1). The :last-child pseudo-class represents an element that is the last child of some other element.
ul > li:last-child { }
http://www.w3.org/TR/css3-selectors/#last-child-pseudo
(In your example </menu> probably is meant to be the closing </div>.)
For the time being I guess it's still best to use classes marking the first and last list element, or simple Javascript on your #menu id.
You could use the :nth-of-type() pseudo-class selector:
#menu > ul > li.section-title:nth-of-type(3)
This will select the third element of all li elements with the class section-title.
Just to clarify the other answers, there aren’t (currently) any CSS selectors that let you select an element based on its content.