In CSS block:
.navbar-custom .nav li a:hover{
outline:none;
background-color: rgba(255,255,255,0.2);
}
does this mean:
"The hover effect applies to the a tag in the navbar-custom's sub class nav list element?"
If no, please clarify.
Yes, you're interpreting it correctly. A space between selectors means that style will be applied to any descendants of the parent selector that match. So for .navbar-custom .nav li a:hover, any anchor elements that are descendants of list items that are descendants of elements in the nav class that are descendants of elements in the navbar-custom class would have that particular style applied on hover.
If you used a bracket instead of the space (i.e. .navbar-custom > .nav > li > a:hover then the style would only apply to direct descendants of each selector, rather than any descendants.
.navbar-custom .nav li a... Are the element selectors. This selector is applying style to the anchor tag within the other element listed in order.
for example
<div class="navbar-custom">
<ul class="nav">
<li>
link somewhere
</li>
<li>
link somewhere
</li>
<li>
link somewhere
</li>
</ul>
</div>
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.
I have this HTML:
<div class="navbar">
<ul>
<li>Foo
<ul>
<li>Bar</li>
</ul>
</li>
</ul>
</div>
I want to apply CSS only to item "Foo." I do not want to tag every top-level <li> with a special class. My limited knowledge tells me I should be able to do this:
.navbar > ul > li {
text-transform: uppercase;
}
But the style gets applied to "Bar" as well when I do it like this. I thought that '>' specifies only immediate children, does it not work the same way when it's nested? Is what I'm trying to do even possible?
I thought that '>' specifies only immediate children, does it not work the same way when it's nested?
It does work the same way. Since you're anchoring the ul directly to .navbar with .navbar > ul, your selector does apply to li elements directly that particular ul only.
The problem is not with the selector; it's the fact that text-transform, like most text properties, is inherited by default. So even though you're applying the style only to immediate li elements, the nested ones receive it by inheritance.
You will need to reverse this manually on the nested elements:
.navbar > ul > li li {
text-transform: none;
}
I do not understand the meaning of the element selector ">". I thought it would style only direct children, but is does not.
HTML
<div class="infos">
<ul>
<li> marmelade</li>
<li> schokolade</li>
<li> softeis</li>
<li> mandeln</li>
<li>
<ul>
<li> marmelade</li>
<li> schokolade</li>
<li> softeis</li>
<li> mandeln</li>
</ul>
</li>
</ul>
</div>
CSS
body {
color: #0bdede;
}
.infos > ul {
color: red;
}
Why are both <ul>s in red? js fiddle
Edit: Ah. Note that the color property is inherited. If you make an element red, all its descendants will be red unless they’re set to another colour.
So, to edit your example CSS to get your desired effect:
.infos ul {
color: #0bdede;
}
.infos > ul {
color: red;
}
http://jsfiddle.net/wrsHt/2/
I thought it would style only direct children, but is does not.
It does. For example:
CSS
.classname ul { color: green; }
.classname > ul { color: red; }
HTML
<div class="classname">
<ul>
<li>Direct child list: red</li>
</ul>
<div>
<ul>
<li>Descendant list, not direct child: green</li>
</ul>
</div>
</div>
http://jsfiddle.net/9YkDx/
However, two things to note about your example code:
Although classname > ul looks more specific than classname ul, it’s not, so your second rule will override your first (although because both rules have the same effect, it’s difficult to tell.
Although you probably know this, to actually select a class name, you want .classname, not classname.
classname > ul - select first level ul children of classname
classname ul - select all ul children of classname
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
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/