I have following HTML:
<ul class="menu">
<li>One</li>
<li class="two">Two</li>
<li>Three</li>
</ul>
and following CSS:
.menu > li {
color: red;
}
.two {
color: green;
}
but all list items have red color. And if I change it to this:
ul > li {
color: red;
}
.two {
color: green;
}
secong list item with .two class have now green color as I wanna. Is this any bug or why it work this way?
http://codepen.io/Chovanec/pen/iJsuC
You can calculate the specificity of those selectors (here's a friendlier version):
.menu > li has specificity 0,0,1,1 (11).
ul > li has specificity 0,0,0,2 (2).
.two has specificity 0,0,1,0 (10).
The bold numbers are just the base-10 representations of the specificities. You won't always be able to write them that way, as 0,0,100,0 is also a valid specificity and must be represented in a base higher than 100.
So back to your question: .menu > li > .two > ul > li, as class selectors are more specific than tag name (type) selectors.
Related
I had to Create a working HTML/CSS for the following nestes list
root
child1
child11
child2
child21
child22
child3
child31
So for this I created the following
HTML
<ul class="list-view">
<li>
<ul><li>Chlid11</li></ul>
</li>
<li>
<ul>
<li>Chlid21</li>
<li>Chlid22</li>
</ul>
</li>
<li>
<ul>
<li>Chlid31</li>
</ul>
</li>
</ul>
Now How will I be able to apply CSS to the leaf parent and root node .
I have to make Leaf to green , parent to red and root should be like parent but with underline
Here Leaf are
Child: 11 , 21, 22 , 31
Parent: the three li
root will be :the first ul
This was a question asked to me in an Interview I am just trying to solve it
Css has to be dynamic . I mean I was not suppose to add classes directly saying what is leaf and what is root .
Something like this
Jsfiddle
UPDATE
CSS
.list-view> li:first-child{
color:red;
text-decoration: underline;
}
.list-view> li ul li {
color:red;
}
.list-view> li ul li ul li{
color:green;
}
I am not able to make just the root node underline
Thanks
I am going to take a stab in the dark, so please don't shoot me if i jumped the gun. But here is my understanding of what he is talking about.
<ul class="root">
<li class="parent">
<ul class="leaf">
<li>Chlid11</li>
</ul>
</li>
<li class="parent">
<ul class="leaf">
<li>Chlid21</li>
<li>Chlid22</li>
</ul>
</li>
<li class="parent">
<ul class="leaf">
<li>Chlid31</li>
</ul>
</li>
</ul>
CodePen for example
first of all, your markup does not make very much sense to me. Nesting ul's inside li's is not very useful when the li's do not contain any other content. I suppose your markup should look more like this:
<ul>
<li>
<span>Root</span>
<ul>
<li>Parent</li>
<li>Parent
<ul>
<li>Leaf</li>
<li>Leaf</li>
</ul>
</li>
</ul>
</li>
<li>Root</li>
</ul>
When it comes to targeting each level with css, you have a number of options. Adding classes to each level may seem the most straight forward, but it can be harder to maintain, and it is easier to make mistakes. Others have already demonstrated this technique, so I'll limit myself to a few alternatives:
option 1a:
ul { /* root + parent + leaf */ }
ul ul { /* parent + leaf */ }
ul ul ul { /* leaf */ }
option 1b:
li { /* root + parent + leaf */ }
li li { /* parent + leaf */ }
li li li { /* leaf */ }
option 2:
ul > li { /* root + parent + leaf */ }
ul > li > ul > li { /* parent + leaf */ }
ul > li > ul > li > ul > li { /* leaf */ }
That is basically it I guess, though you could come up with some variations. Option 1a and 1b are equivalent. Option 2 is more specific, and can be useful when trying to overwrite certain styles. It is considered good practice to keep your selectors as little specific as possible though. This way you can overwrite them easier later on, and your selectors do not get ridiculously long. It just keeps your code easier to read and maintain, so I would definitely go for option 1 in this case.
Note that this technique requires you to overwrite your styles. The styling you requested could ie. be achieved by doing something like this:
li {
color:red;
}
li span {
text-decoration: underline;
}
li li li {
color:green;
}
The pseudo classes you speak of in the comments (:nth-child, ...) are irrelevant here. They are meant for distinguishing between siblings, not for parent-child relations.
edit:
the text-decoration property is a bit tricky to overwrite. Have a look at the specs on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
Text decorations draw across descendant elements. This means that it is not possible to disable on a descendant a text decoration that is specified on one of its ancestors.
To solve this, you have to make sure the element with the underline is not the parent of the rest of your tree. Th easiest way is to put it in a span and apply the underline only to that:
http://jsfiddle.net/r616k0ks/3/
(I have updated my code samples above accordingly)
Using some specific selectors you can create almost any selection without using classes on the child elements.
I don't know if this is what you're getting at:
/* Root */
.list-view { background: grey; }
/* First level li's */
.list-view > li { background: red; }
/* First level of ul's */
.list-view > li > ul { background: orange; }
/* Second level of li's */
.list-view > li > ul > li { background: purple; }
/* Second level of li's, first element */
.list-view ul > li:nth-child(1) { background: green; }
/* Second level of li's, all other elements */
.list-view ul > li:nth-child(1n+2) { background: blue; }
See link https://jsfiddle.net/6d3g3zLm/
If not, feel free to elaborate on your question.
Have you tried adding classes to your html?
https://jsfiddle.net/w7tx52L5/
HTML
<ul>
Root
<li class="parent">
Parent1
<ul class="child"><li>Chlid11</li></ul>
</li>
<li class="parent">
Parent2
<ul class="child">
<li>Chlid21</li>
<li>Chlid22</li>
</ul>
</li>
<li class="parent">
Parent3
<ul class="child">
<li>Chlid31</li>
</ul>
</li>
</ul>
CSS
.root {
color: red;
text-decoration: underline;
}
.parent {
text-decoration: none;
color: red;
}
.child {
color: green;
}
Edit
from your comment it appears you need to use :nth-child selectors. That wasn't clear from your original question. try this css -
ul {
color: red;
display: inline-block;
width: 100%;
text-decoration: underline;
}
ul li {
display: inline-block;
width: 100%;
text-decoration: none;
color: red;
}
ul li:nth-child(odd) > ul li:first-child {
color:green;
}
ul li:nth-child(even) > ul li {
color: green;
}
The workaround of display: inline-block and width:100% is because text-decoration affects all nested elements as well. http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration
Add classes to the list elements as Geoffrey has shown in his answer. Then apply styling to the classes as you would any styling. If you don't know CSS or anything about how to style, I would suggest researching a little more before you ask these kinds of questions, as this stuff is relatively easy to learn if you put some time and effort into it. http://www.w3schools.com/css/
Html
<ul>
<li class="first active">Test</li>
<li class="second">Test</li>
</ul>
CSS
ul li {
padding: 10px
}
.first:hover {
background-color: red;
}
.second:hover {
background-color: grey;
}
.active {
}
I want to display .active item with same state as :hover. My point here to inherit li colour for active items.
Is this any way to do it?
http://jsfiddle.net/o3c6js03/
What you're asking is not possible; the inherit value sets a property to be the same as the corresponding property of the parent element.
If you're writing out individual styles for the :hover state of each li anyway, then simply add the .active class to the same rule - CSS rules can have multiple selectors, you just need to separate them with commas.
For example:
ul li{
padding:10px
}
.first:hover,.first.active{
background-color:red;
}
.second:hover,.second.active{
background-color:grey;
}
Maybe you want to achieve this:
.first:hover,
.first.active {
background-color: red;
}
.second:hover,
.second.active {
background-color: grey;
}
As you can see I had a difficult time expressing the question in the title.
I have a ul that contains lis which themselves contain a ul with it's own lis.
I would like to target just the first li elements and not the elements within the second ul.
If you look at this fiddle (or the code below), I would like to change item 1's color but not sub item 1's. Is that possible without attaching a class to the li elements?
<div class="foo">
<ul>
<li>
item 1
<ul>
<li>sub item 1</li>
</ul>
</li>
</ul>
</div>
will something like this help?
.foo ul li {
color: red;
}
.foo ul li ul li {
color:green;
}
demo - http://jsfiddle.net/victor_007/6fqbc4ud/6/
:not(li) > ul > li {
color: red;
}
ul li{
color:green;
}
To do so, use the child combinators selector, which only selects a direct child.
At first glance you might use ul>li, but that will also select the second level list-items, since they're also a direct child of the list.
So you need to define a starting point, in this case the parent (div).
I now see that you already have the answer yourself. It however doesn't work in your fiddle since you don't declare a 'default' color. Which means that the second level list-item inherits the color of it's parent.
li {
color: blue;
}
.foo>ul>li {
color: red;
}
updated Fiddle.
.foo ul li { color: black; }
.foo > ul > li { color: red; }
Demo
I have that site code inside body
HTML:
<ul id="navlist">
<li class="first">
Home
</li>
<li>
Store
</li>
</ul>
and this style CSS:
ul#navlist
{
float: right;
}
ul#navlist li
{
display: inline;
}
ul#navlist li a
{
border-left: 1px dotted #8A8575;
padding: 10px;
margin-top: 10px;
color: #8A8575;
text-decoration: none;
float: left;
}
ul#navlist li:first-child a
{
border: none;
}
ul#navlist li a:hover
{
color: #F6855E;
}
I try to understand what means and syntax is of:
ul#navlist li:first-child a
componentClass#class componentClass:class(???) componentClass
What is first-child? Is there a second childmodificator? Are those css blocks are considered by logical alternative?
First-child is first child of parent element - http://www.quirksmode.org/css/selectors/firstchild.html
In this case, li:first-child is the same as li.first.
For second child, you can use li:nth-child(2) (unsupported in IE <= 8), li.first + li or :first-child + li (in this case where we speak about lis) - siblings or first element. In this case you can use simplier li + li (all lis except the first one). Etc.
Look what options you have when you want to fire Xth element - http://www.quirksmode.org/css/selectors/#t50 (+ you can use siblings selector to fire next element (+), or all next siblings selector (~)), etc.
I have a nested li and they have specific classes. I am having issues with the nested classes. Despite the specific class, the styling is that of the class of the parent:
<ul>
<li class="navtitle-current">ONE
<ul>
<li class="navtitle-current">TWO</li>
<li class="navtitle">THREE</li>
</ul>
</li>
</ul>
.navtitle {
font-weight: none;
}
.navtitle a{
background-color:white;
color: gray;
}
.navtitle a:hover,
.navtitle:hover{
background-color:white;
color: black;
}
.navtitle-current {
font-weight: none;
}
.navtitle-current a{
background-color:white;
color: black;
}
.navtitle-current a:hover,
.navtitle-current:hover{
background-color:white;
color: black;
}
What I want to happen is that ONE needs to be in black, TWO in black and THREE in gray. However, all the links are black.
I was under the impression that if I explicitly have a class, I should not have any such issues. Does anyone have any thoughts?
All help is appreciated.
Note: I realize the CSS blocks are not in . I just put the code on here for the sake of showing what I have.
Because .navtitle-current is higher level than .navtitle, the links are inheriting the .navtitle-current a styles. If you want to style links inside that, you need to be more specific with your tags. Change .navtitle a to .navtitle-current .navtitle a and it should work.
Yet another way to go about this:
jsFiddle
.navtitle-current .navtitle a {
background-color:white;
color: gray;
}
It may be just a personal preference, but when possible I try to avoid chaining ul li ul li etc. I find it a bit more readable to use the class names.
The problem is selector specificity - your second to last declaration has the same exact same weight and origin as the class defining the gray-colored text - .navtitle a - and due to the nature of the cascade, the latter rule specified will win
From the 2.1 Spec, Specificity:
Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.
To overcome this, just increase the specificity of .navtitle a by including li before the class, e.g.
li.navtitle a {
background-color: gray;
color: gray;
}
Example
You could do it more clever:
<div class="titles">
<ul>
<li class="current">ONE
<ul>
<li class="current">TWO</li>
<li>THREE</li>
</ul>
</li>
</ul>
</div>
.titles ul li {...}
.titles ul li.current {...}
.titles ul li.current ul li {...}
.titles ul li.current ul li.current {...}
regards,