I'm having a hard time understanding why the behavior of certain properties do not follow the behavior stated in the W3 specification.
For example, in the specification it says that the "background-image" and "background-color" property is not inherited.
But the following code proves this otherwise.
The CSS
#nav > li {
background-color: yellow;}
The markup
<div>
<ul id="nav">
<li>This is a list</li>
<li>This is a list</li>
<li>
<ul>
<li>This is a list</li>
<li>This is a list</li>
</ul>
</li>
</ul>
</div>
You will see that even the 2nd level list items which is nested inside the 3rd list item also has their background-color changed, while I only intended for it to be applied only on the direct children which is the 1st level list items.
Now my question is this.
Why is this happening? Who is in the wrong here, the browsers or the specification? Am I missing something?
Any help is appreciated.
I think I found your answer.
When you look at the devtools, you will see, that the 2nd level got no background-color. The color you see, is the color of the parent li :-)
Fiddle
#nav > li {
background-color: yellow;
}
With the border property you can see it better.
Updated fiddle:
http://jsfiddle.net/2brhj2bq/1/
#nav li {
border:1px solid red;
}
#nav > li {
border:1px solid lime;
}
This is because the next UL is also in the Li , and li have bg color yellow so it should be yellow . just think it what have you done , you are assigning bg then you are seeking why it is happening it is not the bg of inner ul li it is the bg of ul#nav li.
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.
Is it possible to style an unordered list so that the second line and the ones after that are indented the same as the first line of the list item?
Please see the example for exactly what I mean
O----First Line
--SECOND LINE SHOULD START HERE
--EVERY OTHER LINE SHOULD BE LIKE THIS ALSO
Just to supplement my comment, here is a jsfiddle demonstrating what I mentioned. http://jsfiddle.net/R5ptL/
<ul>
<li>Parent</li>
<ul>
<li>Child1</li>
<li>Child2</li>
<li>Child3</li>
</ul>
<li>Parent2</li>
</ul>
And if you want them to be the same style...
ul, li {
list-style-type: circle; /* or whatever style you choose */
}
EDIT: How to do this with multiple unordered lists AND CSS only: http://jsfiddle.net/R5ptL/1/
use the css first-child selector to apply the indent to every line other than the first.
ex:
ul li:first-child{margin:0px;}
ul li{margin:5px;}
li:not(first-child) {
margin-left: 20px;
}
or
li {
margin-left: 20px;
}
li:first-child {
margin-left: 0;
}
It's like this: (HTML solution, not CSS)
<ul>
<li> first item </li>
<li> second item
<ul>
<li>first item of second list</li>
<li>second</li>
</ul>
</li>
<li> continue primary list </li>
</ul>
In short, you nest a complete new UL inside the primary UL.
My first answer was apparently incorrect after further testing. This should work though:
ul li {
text-indent:-10px;
margin-left:10px;
}
NOTE: This answer runs under the assumption that every line other than the first is simply wrapped text. If those other lines are meant to be sub-points, go with gwin003's answer.
I think it's not bug, just that I'm no good in css. take a look why the border of active is different from the hover state:
http://jsfiddle.net/Mb398/1/
<ul class="menu">
<li class="active">Sign up</li>
<li>Login In</li>
</ul>
The .active is on the <li> but then in your CSS you set the :hover-styling on the <a>.
By removing "li a:hover" and replacing that with "li:hover" you'll get the right result.
This is a fiddle of it
You are selecting two different elements which have different dimensions. The .active is the parent li which is slightly bigger than the <a> you are selecting with the :hover. Since the li is larger, its border will be longer and slightly lower. The <a> is also blue by default, so the border is blue.
Solution
Step 1:
You need to change each instance of
border: 5px solid;
to
border: 5px solid black;
This will fix the coloration issues.
Step 2:
Then change
.menu li.active {
to
.menu li.active a {
This will fix the size issues.
Here is a working fiddle.
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
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/