I have a list with some nested lists inside it like this:
<ul class="menuSports">
<li>
<ul>
<li>
<ul>
<li>
<li>
</ul>
</li>
</ul>
</li>
<ul>
and am using a before element to create an arrow so that the items are displayed like a dropwdown list:
#menuSports li ul li:before { content: '\25BA'; position:absolute; color:#cecece; padding-left: 5px; padding-top:5px;}
The problem is the before element is being applied to all li elements from the one specified onwards, kind of like this:
#menuSports li ul li:before { content: '\25BA'; position:absolute; color:#cecece; padding-left: 5px; padding-top:5px;}
#menuSports li ul li ul li:before { content: '\25BA'; position:absolute; color:#cecece; padding-left: 5px; padding-top:5px;}
Is there a way to stop this from happening, so that only the li specified in the first selector is given the element?
P.S I can not change the html code or use javascript, using css is my only option.
ul li { margin: 0 0 5px 0; }
ul > li { margin: 0 0 5px 0; }
The first selector above is a decendant selector. It will select any list items that are anywhere underneath an unordered list in the markup structure. The list item could be buried three levels deep within other nested lists, and this selector will still match it.
The second selector above is a child combinator selector. This means it will only select list items that are direct children of an unordered list. In otherwords, it only looks one level down the markup structure, no deeper. So if there was another unordered list nested deeper, the list item children of it will not be targeted by this selector.
For more information try this link
You can specify level(s) of LI using descendant selector.
So,
#menuSports > li {/* only first level LIs */}
#menuSports > li > ul > li {/* only second level LIs */}
#menuSports > li > ul > li > ul > li {/* only third level LIs */}
Alternative is to reset styles for next levels
#menuSports li li:before {content: 'content'; /* second and each nest level LIs */}
#menuSports li li li li:before {content: ''; /* fourth and each next are reseted */}
Related
I have just started learning css. I have assumed that a class is a way of grouping styling information.
I'm trying to understand CSS pagination. In the example, it is written
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li { display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
pagination is a class. what does it mean when they write ul.pagination li and
ul.pagination li a?
ul.pagination li a has a float left; style. what will this achieve?
When you have the following code block in your HTML document:
<ul class="pagination">
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
and you would like the style this list, list items, and the links separately.
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
The CSS block above will affect your list (<ul></ul>).
ul.pagination li {
display: inline;
}
This one will affect each list item (<li></li>) in your list.
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
and the last one will affect each link (<a></a>) inside of your list items.
float: left is used to have a horizontal list (for example menu). You can learn more from this link: http://www.w3schools.com/cssref/pr_class_float.asp
Lastly, I also suggest you to read the CSS Selectors in order to understand the logic: http://www.w3schools.com/cssref/css_selectors.asp
I recommend you read an authoritative source on CSS selectors: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors
Note that the term "selector" refers to both a rule's selector (everything before the {) but also to individual components of the selector, so h1.foo p.bar is a selector, as is just h1.foo and p.bar, for example).
In response to your questions directly:
what does it mean when they write ul.pagination li and ul.pagination li a?
When a space character appears between two selectors (e.g. between ul.pagination and li it means "descendant", so any <li> element which appears underneath an <ul class="pagination"> will be matched, no matter how deep it is (as opposed to the > selector, as in ul.pagination > li, which only selects <li> elements that are immediate children of <ul class="pagination">.
CSS rules match and apply to only the deepest element in the rule, so ul li will only apply style rules to the <li>, but ul li a will only apply style rules to <a> elements.
ul.pagination li a has a float left; style. what will this achieve?
It means that every <a> element that is a descendent of a <li> which in-turn is a descendent of a <ul class="pagination"> will have the property float: left applied to it.
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/
How to read a syntax like .nav-menu li:hover ul?
How is it different from .nav-menu li ul:hover?
I've searched w3schools but all the examples there are of the latter type.
Can anyone explain?
Below is the code that I've implemented for creating a dropdown submenu.
HTML
<ul class="nav-menu">
<li>Home</li>
<li>Retrievals
<ul class="dropdown-menu">
<li>Data Listing</li>
<li>Web Scheduling</li>
<li>Google Maps Application</li>
</ul>
</li>
<li>Reporting</li>
CSS:
.nav-menu li
{
width: 150px;
float: left;
}
.nav-menu li ul
{
display: none;
}
.nav-menu li:hover ul
{
display: block;
}
.nav-menu li:hover ul
an unordered list
which is a descendant of a hovered list item
which is a descendant of an element that is a member of the nav-meny class
.nav-menu li ul:hover
a hovered unordered list
which is a descendant of a list item
which is a descendant of an element that is a member of the nav-meny class
You'd be unlikely to notice any practical difference with your specific HTML since the only list items you have that contain an unordered list contain nothing except a single unordered list.
First rule: .nav-menu li:hover ul apply css to ul once you hover parent li.
Second rule: .nav-menu li ul:hover apply css to ul once you hover ul element.
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 a navigation tree that continuly build a nested list of categories.
Is there a way to indent the nested category 5px, to the nth level
/* the traditional way, but this is fixed to 1 level */
#sidebar ul li ul {
margin-left:5px;
}
#sidebar ul li ul li ul {
margin-left:10px;
}
In CSS3 you can use nth-child selector
http://www.w3schools.com/cssref/sel_nth-child.asp
#sidebar ul li ul:nth-child(1) {
margin-left:5px;
}