I m having a list with ul and li s.
Now I want to apply a css rule to the parents only and not to the children.
For this I'm using the > symbol but that is applied to the children as well.
The example here
The code I used at the css -
#nav > li a {
padding-bottom: 30px;
}
The html being -
<ul id="nav">
<li>
Home
</li>
<li>
About
<ul>
<li>The product</li>
<li>Meet the team</li>
</ul>
</li>
<li>
Services
<ul>
<li>Sevice one</li>
<li>Sevice two</li>
</ul>
</li>
<li>
Product
<ul>
<li>Small product (one)</li>
<li>Small product (two)</li>
</ul>
</li>
<li>
Contact
<ul>
<li>Out-of-hours</li>
<li>Directions</li>
</ul>
</li>
</ul>
I think you want to use #nav > li > a which covers a children of the <li>. Otherwise any <a> descendant of the <li> is also selected (which is everything).
As of CSS3, there is no way to select an element based on its children. I think that something like that is coming in CSS4, but I'm not sure.
Small note: the > selector selects only the children, not the parents and the children.
Related
I have HTML code like this
<ul>
<li>
<a>first</a>
<ul>
<li><a>sub-1</a></li>
<li><a>sub-2</a></li>
</ul>
</li>
<li><a>..</a></li>
</ul>
and i want to style every 'a' of odd 'li' only of first 'ul'
i am doing it like this
ul>li:nth-child(odd)>a{background:#000}
what is mistake here ???
because it also taking 'a' of sub 'ul'
Test if the parent is not an li
:not(li) > ul > li:nth-child(odd) > a {
background: red
}
<ul>
<li>
<a>first</a>
<ul>
<li><a>sub-1</a></li>
<li><a>sub-2</a></li>
</ul>
</li>
<li><a>..</a></li>
</ul>
How do I avoid tagging css to the below code. I've tried a few things e.g. tried first:child but that didnt seem to work. I would just like the outer lis to be red not the second lis within the parent li
li {
color: red;
}
<ul>
<li>Tag this as red
<ul>
<li>
Dont' tag this as color red
</li>
</ul>
</li>
<li>Tag this as red
<ul>
<li>
Dont' tag this as color red
</li>
</ul>
</li>
</ul>
```
Use direct child combinator > along with initial:
ul>li {
color: red;
}
ul>li>ul>li {
color: initial;
}
<ul>
<li>Tag this as red
<ul>
<li>
Dont' tag this as color red
</li>
</ul>
</li>
<li>Tag this as red
<ul>
<li>
Dont' tag this as color red
</li>
</ul>
</li>
</ul>
The reason you need to reset it on the inner lis is a) color is one of the inherited properties (any element will have the text color defined closest in its ancestor tree, unless it explicitly has a color set), and b) that ul>li will also match the inner lis.
you can use just classes to separate each one of them
.tagged-red {
color: red;
}
.untagged-red {
color: black;
}
<ul>
<li class="tagged-red">Tag this as red
<ul>
<li class="untagged-red">
Dont' tag this as color red
</li>
</ul>
</li>
<li class="tagged-red">Tag this as red
<ul>
<li class="untagged-red">
Dont' tag this as color red
</li>
</ul>
</li>
</ul>
The child combinator > is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. (for more information about child combinator you can read this.
But in your case, This doesn't work, because inner <li> inherits color from outer <li>, and both turn red.
.outer{
color:red;
}
.inner{
color:initial;
}
<ul>
<li class="outer"> This shoud be red
<ul>
<li class="inner">
This shoudn't be red
</li>
</ul>
</li>
<li class="outer"> This shoud be red
<ul>
<li class="inner">
This shoudn't be red
</li>
</ul>
</li>
</ul>
For more read about inheritance in css, you can read this article
I'm designing a dropdown menu with many levels and need to set the padding of the li option based on the depth of the nesting.
<ul>
<li>1</li>
<li>2</li>
<ul>
<li>a</li>
<li>b</li>
<ul>
<li> i </li>
<li> ii </li>
<li> iii </li>
</ul>
</ul>
</ul>
The option 2 has two suboptions: a and b. The option b has 3 suboptions: i,ii,iii
Is there any way I can have all li on the first level have 16px padding-left, and all lis after that have padding-left of something like (parent li's padding-left) + 20px?
Note: what I really want is all options one after the other and each option's padding is based on its level of nesting without having to write an explicit class for each level.
Edit: Here's a basic codepen Codepen for the main problem: What I want is the hover background for each item to extend to the full width of the main container
Edit: To dynamically increase padding you can do something like this:
ul:nth-child(1) > * {
padding-left: 16px;
}
Check the snippet below:
ul:nth-child(1) > * {
padding-left: 16px;
}
<ul>
<li>1</li>
<li>2</li>
<li>
<ul>
<li>a</li>
<li>b</li>
<li>
<ul>
<li> i </li>
<li> ii </li>
<li> iii </li>
</ul>
</li>
</ul>
</li>
</ul>
I'm puzzled by this. In a nested list, by setting the height of LI elements the list, the items overlap. What is the explanation for this, and what is the proper way apply height without overlap effect? (I want height, not padding or margins.)
.aaa {background:#ccf;}
.bbb {background:#fcc;}
.bbb li {height:25px;}
<ul class="aaa">
<li>one one one</li>
<li>two, too
<ul>
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</li>
<li>three</li>
<li>here comes four</li>
</ul>
<ul class="bbb">
<li>one one one</li>
<li>two, too
<ul>
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</li>
<li>three</li>
<li>here comes four</li>
</ul>
<li>two, too
<ul> <-- this list is part of your LI
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</li>
Since you have a list nested in a list, the inner list overflows because it is bigger than 25px.
Use min-height instead of height.
The second tier li is inheriting the CSS from the top tier li
You need come CSS like
ul li ul li {/*style to hit the bottom tier*/}
This looks like you are making a menu - Tuts like this (http://www.devinrolsen.com/pure-css-vertical-menu/) could advise you for better code but Padding and margin are recognised techniques to achieve what you apparently want
I have the following design problem. I have a list of items and I want to make the whole of each of the first li to be a clickable link. I have tried adding a link in each li, making it a block level element and positioning it absolute, but that doesn't work because the parent and all li's are floated left for layout purposes. Any help would be appreciated, thanks
<ul style='float:left;width:x>
<li>
<ul>
<li>Title</li>
<li>Description</li>
</ul>
</li>
<li>
<ul>
<li>Title</li>
<li>Description</li>
</ul>
</li>
<li>
<ul>
<li>Title</li>
<li>Description</li>
</ul>
</li>
</ul>
If the parent li has position: relative, you can position things absolutely inside it without messing with the way the parent floats around.
Another, somewhat inelegant solution would be to add an onclick event to each of the parent lis, and use JavaScript to change the URL. Also, add cursor: pointer to your CSS to make it look like a link. But as I said, this is not elegant.
Have you thought about jQuery as an option? Its probably not the best solution but it would work. so i would rig something up like this:
$("ul li:first-child").bind('click',function(){
// click event here.
alert("Boom!");
$(this).find("li a").trigger('click');
});
and i would have your code look like this:
<ul>
<li>
<ul>
<li>title</li>
<li>description</li>
</ul>
</li>
<li>
<ul>
<li>title</li>
<li>description</li>
</ul>
</li>
<li>
<ul>
<li>title</li>
<li>description</li>
</ul>
</li>
<li>
<ul>
<li>title</li>
<li>description</li>
</ul>
</li>
</ul>
Put the links in the li and use display:block. Don't absolutely position them.