Is it possible to use a pseudo class inside of a :not tag?
Example:
li:not(.inner:hover):hover { // Code }
<li>
<div class="inner"></div>
</li>
I am trying to cancel out the effect of the parent hover, when I hover an inner item, without using javascript.
The expected result for above code is when you hover the li, but not the inner div, the li get's a hover effect. But only if you're not hovering the .inner.
Update
http://jsfiddle.net/eTV86/
What I want is, when the .inner turns black, the li turns back to red.
Yes, but you're using both a class and a pseudo-class, which is invalid:
li:not(.inner:hover):hover
Even if you change it to something that's valid (as per this answer):
li:not(.inner):hover, li:not(:hover):hover
The first selector will always match your li on hover, and the second selector won't ever match anything. It will never match your div.inner because you're attaching the :not() to the li.
Lastly, if you want to change the li when .inner gets a hover, that's not possible with current CSS selectors. You'll need JavaScript.
You can use the simple css instead pseudo class
HTML
<ul>
<li class="active">Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
CSS
ul li a{ color:black}
ul li a:hover { color:red }
ul li.active a:hover { color:black /*re use the same properties which is there in default style viz ul li a{} */}
DEMO http://jsfiddle.net/mKQas/2/
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.
When I'm trying to select all direct child of a parent element using ">", it works with some properties like border and all, but not with font-properties like color, font-weight etc..
My HTML is
<ul>
<li>Item 1</li>
<li>
<ol>
<li>Subitem 2A</li>
<li>Subitem 2B</li>
</ol>
</li>
</ul>
CASE1 CSS:
ul>li {
color:#F00;
}
But here the color:#F00 property gets applied to all the "li" elements, But i want it to get applied only for the direct "li"s of "ul".
CASE 2
CSS:
ul>li {
border: solid 1px #000;
}
This one works well for me and the border gets applied only to the direct li child only.
I know it can be resolved by overriding with some other classes and all. But i want to know, why some css properties get inherited and others not.
It's happening due to the default inheritance capability of certain CSS Properties. Values of these kind of properties will be transmitted to the child by default.
This document from W3C gives detailed list of inheritance in various CSS properties. Full property table
try this
Demo
<ul>
<li>Item 1</li>
<li>
<ol>
<li>Subitem 2A</li>
<li>Subitem 2B</li>
</ol>
</li>
</ul>
css
ul > li {
color:#F00;
}
ul > li > ol > li {
color:#000;
}
try this
ul > li ol li {color:black;}
As the listing element has been inheriting the color property from its parent, you need to override it.
You can add below style before yours as like
li {
color: #000;
}
ul>li {
color:#F00;
}
It overrides the color: inherit value.
I think you might find the answer you need here: http://www.w3schools.com/cssref/sel_firstchild.asp
You should be able to select these elements with
ul:first-child {
// css
}
Hope this helps
I am trying to make a drop down list by using nested Un ordered lists.
My case is i have an unordered list, which is having another unordered list inside of its li element. I had written hover for the first level li elements by using the child selector. My problem is while hovering the first level li element, the css for its hovering process is also get applied to its child li element. My question is why does the child selector selecting its descendants in my case..? and what should i do to avoid this in future.?
DEMO - Fiddle
Here is the solution below:
My question is why does the child selector selecting its descendants in my case..?
Because you have defined one part of the CSS by adding #ULHeaderMenuWrapperMenuCollection > li:hover
what should i do to avoid this in future.?
You have to protect the inheritance by adding #ULHeaderMenuWrapperMenuCollection > li:hover div ul li to your CSS. Here is the Working Solution.
#ULHeaderMenuWrapperMenuCollection > li:hover div ul li
{
color:black;
}
#ULHeaderMenuWrapperMenuCollection > li:hover div ul li:hover
{
color:orange;
}
Hope this helps.
Updated to fit to your original code
When you mouse is hover your sublist, it's still hover the main one.
I suggest you to put your <li> text in a <span> or a <a>, which makes your css simplest :
HTML
<ul id="ULHeaderMenuWrapperMenuCollection">
<li>
<span>Products</span>
<div id="DivProductsMenu">
<div id="DivProductsMenuUpper">
<ul>
<li><span>CIMS</span></li>
<li><span>VPRO</span></li>
<li><span>BIRIS</span></li>
</ul>
</div>
<div id="DivProductsMenuLower">
<ul>
<li><span>PATRON</span></li>
<li><span>DEAL</span></li>
<li><span>MEDIX</span></li>
</ul>
</div>
</div>
</li>
<li>
<span>Contact Us</span>
</li>
</ul>
CSS
#ULHeaderMenuWrapperMenuCollection li > span:hover {
color:orange;
}
JsFiddle
I have a bunch of unordered list elements that are stacked side by side with each other. To accomplish this, the style rule typically applied is:
#slide ul,li{
float:left;
list-style-type:none;
}
I need to introduce another unordered list of elements that behave the way the ul and li element typically do; that is stacked on top of each other but without any list-style-type, and to achieve this:
.stack ul,li{
list-style-type:none
}
The problem is that the styles of stack class for ul,li do not apply and the elements stack next to each other as they are being in the case of ul,li for #slide.
Check it out on this js fiddle:
http://jsfiddle.net/G7JHK/
Are my selectors wrong?
P.S: I have tried this out with class/id and various combination of both but the result is always the same.
Because of the comma in your selector you were applying float left to all li elements. Try something like this:
<ul class="stack">
<li>element 1</li>
<li>element 2</li>
</ul>
<br/>
<ul id="slide">
<li>element 3</li>
<li>element 4</li>
</ul>
#slide li{
display:inline;
}
This css will make all list elements in the div 'slide' display in a row and all other list elements will continue to display like normal. It saves you having to use two different classes :)
Your CSS should be like so
ul.stack li{
display:block;
}
ul#slide li{
float:left;
}
I think you want something like:
ul.stack li{
display:block;
}
ul#slide li{
float:left;
}
Look at the selectors. You want to select a ul with class stack (ul.stack) and find its child li.
There is problem of your selector. class or id of same element never separated by a white space. They should be with no space and the child are separated by a space but no ',' will not be used there..
So you can try this in your code
ul.stack li{
display:block;
}
ul#slide li{
float:left;
}
Also you have to place the HTML tag name first and then the preceding attribute.
The problem is that you selected the ul that is a descendent of slide, but your ul has an id of slide, so it doesnt work, because there is no ul that has a container with an id of slide. Also by putting ,li you are selecting all list items on the page. You want to have #slide li, which will only select the list items with a container id of slide. You don't need the #slide ul so your final code should be
#slide li {
float:left;
}
http://jsfiddle.net/G7JHK/6/
As an alternative, you could use ul:nth-of-type(2) instead of an id to save some space in the html
http://jsfiddle.net/G7JHK/7/
Sorry with title if it is not looks bad, I don't know how can I write the title for my issue.
So I have a menu bar with some menu-items and submenu-items as:
<div id="mainmenu">
<ul id="menu">
<li><a class="current" href="">Menu1</a></li>
<li>Menu2
<ul>
<li>Submenu1</li>
<li>Submenu2</li>
</ul>
</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
</div>
Here is the fiddle of what I have done so far.
What I want is to keep the menu-item also in :hover state if its submenu-item is being hover, such as If my mouse is on submenu or submenu2 the Menu2 should also be darkened. How can I do this with CSS?
I hope I am clear with my question.
EDIT:
Wooo thanks a lot every-one.
got it with: #menu li:hover
#menu li:hover,#menu a:hover,#menu > li a.current{
}
In last line of your CSS, add #menu li:hover to target selectors
Updated example here: http://jsfiddle.net/7UaNn/
Add this #menu li:hover > a in the following css
#menu a:hover, #menu > li a.current {
// your Style
}
So it should look like this:
#menu a:hover, #menu > li a.current, #menu li:hover > a {
// your Style
}
See Demo: http://jsfiddle.net/akhurshid/bk2HA/7/
At the moment all you hoverstyles for the listitem are applied to the a- Element.
However, you need to apply them to the li-Element to keep the hover state active.
Sometimes that may become tricky, but in your case it's pretty easy, just add:
#menu > li:hover{
background:#474747;
}
to your styles.
See your modified fiddle
Along with "a" also add hover for "li" :
#menu > li:hover{
background:#474747;
}
You may achieve this by hooking up to the :hover state of the parent li element instead of the anchor element - which is a children of the list-item that is actually hovered - like so:
li a:hover,
li:hover > a {
color: #fff;
}
You might need to use :nth-child() to get around every sublink being in hover state. Did not test this.
/edit: updated the selector, now using > a to only select the direct child anchor element of the hovered list element, no need for :nth-child or the like.
Make the thing that is changed on hover the background of the LI rather than the background of the 'a'.
ul#menu li:hover { background:#000; }