For the given example:
<div class="menu">
<div class="menu_top">Menu1<div class="sub_menu">SubMenu1</div></div>
<div class="menu_top">Menu2<div class="sub_menu">SubMenu2</div></div>
<div class="menu_top">Menu3<div class="sub_menu">SubMenu3</div></div>
</div>
How can I change the display property for the respective childs elements?
I was trying the solution:
.menu_top .sub_menu{
display: none;
}
.menu_top:hover div.sub_menu{
display: block;
}
But all the "sub_menu" are shown when the mouse is over any "menu_top".
You want to display the .sub_menu when hovering over .menu_top?
.menu .menu_top:hover .sub_menu {
display: block;
}
The selector should be .menu_top:hover if you only want to display the respective child .sub_menu on hover.
See it in action - http://jsfiddle.net/spBJH/
You just need a minor change i think.
You have .menu:hover instead of .menu_top:hover
try this instead:
.menu .sub_menu{
display: none;
}
.menu_top:hover div.sub_menu{
display: block;
}
Try:
.menu_top:hover div.sub_menu {
display:block;
}
5.6 Child selectors
A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by ">".
The following rule sets the style of all P elements that are children of BODY:
body > P { line-height: 1.3 }
The following example combines descendant selectors and child selectors:
div ol>li p
It matches a P element that is a descendant of an LI; the LI element must be the child of an OL element; the OL element must be a descendant of a DIV. Notice that the optional white space around the ">" combinator has been left out.
You've got them switched.
.menu:hover = { do something when I hover over .menu }
I think what you want is:
.sub_menu:hover { this }
Related
I was finishing up selectors and testing my knowledge and encountered a problem that makes no sense.
In theory, the code below should color all first children that are li red, yet, a first and second child are being colored red.
Why is the second child colored red here?
li:first-child{
color: red;
}
<ul>
<li>Peter
<ol>
<li>Juan</li>
<li>Samuel</li>
</ol>
</li>
<li>John
<ol>
<li>Patrick</li>
<li>Spongebob</li>
</ol>
</li>
<li>Sara
<ol>
<li>Jonathan</li>
<li>Kragie</li>
</ol>
</li>
</ul>
color is inherited from the parent element....in this case the li:first-child
So when you tell the li to be a red color this is inherited by all its children.
You have no rule to override this for the children so they are colored by inheritance/
It happens because the color is inherited from the parent element, try to add this to your CSS to override it:
li {
color:initial;
}
This is because you have nested lis.
The second inner li is being coloured red because it's inheriting that rule from the style applied to the first child outer li, ie its parent.
li:first-child { color: red; }
li:not(:first-child) { color: black; }
That will override the inheritance and result in the text of the first outer and inner lis being red. Fiddle
Alternatively, if you want to colour only the inner lis:
li li:first-child { color: red; }
The li:first-child selector will also select the first li element in your parent list. You can target your selector using direct descendents or you can use classes.
Option 1: class selector on parent list
This is the preferred option as it will automatically namespace your css. All your selectors will start with .menu when targeting child elements.
<ul class="menu">
<li>Peter<ol>
<li>Juan</li>
<li>Samuel</li>
</ol></li>
</ul>
.menu ol li:first-child{
color: red;
}
If you want to override the style of a menu, you can use an extra class on the menu element and for example target it with the following selector. .menu.horizontal
Option 2: class selector on list item
This option has the same benefits of the first option, but now .menuItem is namespaced on its own.
<ul>
<li class="menuItem">Peter<ol>
<li>Juan</li>
<li>Samuel</li>
</ol></li>
</ul>
.menuItem ol li:first-child{
color: red;
}
Option 3: direct descendent selector
ol>li:first-child{
color: red;
}
It is always better to use classes because if you use ol elements in other places, the selector would still apply there.
Please, don't confuse this question with others published on stackoverflow.
NOTE: Hide list with one element with pure CSS my question involves the parent tag.
I have these css rule:
ul {
padding: 5px;
}
ul > li:only-child {
display: none;
}
This rule hides the first ul tag when its only one.
But the space of the ul tag is still there.
How I can hide both ul and li when its onliy one li declared in my html?
The extra spacing you see even after hiding the li elements is because you have included a padding for the parent ul element.
So the solution is to remove the padding from the ul element and apply it on the child li elements.
Does CSS support conditions? I mean that there is hover, so when mouse is on it, element style changes.
I have class ".menu_top_line" with display:none, can I change it to "display:block", when mouse is on other element?
Like:
nav ul li:hover
{
background-color:#FFF;
// other block.display:block
}
There is no way to reference another element from inside a ruleset.
If you can write a selector that matches the element you want to manipulate which also references the element you want to hover, then you can just apply the :hover to that element in the selector.
nav ul li:hover > .menu_top_line {
display: block;
}
Otherwise you need JavaScript.
You can do it for a child element, descendent or an immediately next sibling.
You can use (>)-operator to select any immediate child element space( ) for descendent element and (+)-operator for an immediately next sibling element.
Let me show you the sibling selection similar to the answer given by #Quentin i.e. for child selection only.-
nav ul li:hover + .menu_top_line {
display: block;
}
this will address those elements with class menu_top_line that follows a li that is child of a ul that is child of a nav-element.
So there are 3 means to achieve what you want.
It is possible but only if the element you are targeting the "mouse is over some other element" condition to is some child (or grandchild) of the element you're holding the mouse over.
ul li a {
/* normal */
}
ul:hover li a {
/* a's style when the mouse is over the ul */
}
I'm trying to apply a style to all li items as long as that item is not anywhere in a container with a class of .k-widget
.c-w1 ol li :not(.k-widget) { list-style: decimal outside; }
However the style continues to be applied. The .k-widget is on a div that contain divs that contain the actual li I don't want styled.
<div class="k-widget">
<Lots of Things>
<li> ....
Should be something like that:
div:not(.k-widget) .c-w1 ol li {
list-style: decimal outside;
}
Of course the :not() has to be applied on the div which is before the li as allready stated by Marijke Luttekes.
Also have a look at caniuse for browser support of css3 selectors.
Another possibility would be to tell the .k-widget contents to inherit its styles with list-style: inherit;. So you can override it without using a specific value and adding redundance to your styles:
div .c-w1 ol li {
list-style: decimal outside;
}
div.k-widget .c-w1 ol li {
list-style: inherit;
}
Currently the list style is applied to any item inside a li that does not have the class .k-widget applied. If I understand your problem correctly, you can easily fix this by placing the statement :not(.k-widget) before li.
The problem is that the :not() selector on a parent will match if any parent matches, and since all li elements are within both body and html, all li elements will match.
I would recommend constructing two styles, one overriding the other.
.c-w1 ol li { list-style: decimal outside; }
And
.c-w1 .k-widget ol li { override style here }
How do I delete the background of my last DIV using class="item"?
Parent is: <div id="lastQuestions"></div>
jsfiddle
.item:last-child {
background-color: inherit;
}
Use pseudo element last-child
Here is a working jsfiddle
Alternatively, you could use a different html tag (like span, p or li displayed as block) for the.item elements instead of div to differentiate them from other div elements, and then you can do something like:
#lastQuestions li:last-of-type {
background: none;
}
to select it.
quick illustration
Edit:
Since, according to your jsfiddle, only .item elements are of type div in your code they already differ in type from all other children of #lastQuestions. So you can just try this:
#lastQuestions > div:last-of-type {
background: none;
}
DEMO