I have the following HTML:
<ul>
<li>
test
<ul class="sub">
<li>test 2</li>
</ul>
</li>
</ul>
I'd like to affect the first link but not the second one, how do I do this using only CSS?
You can use :not() pseudo-class to exclude the ul.sub elements, then select the direct <li> and <a> child as follows:
Here you go:
ul:not(.sub) > li > a {
background-color: gold;
}
WORKING DEMO.
Or combining Attribute selector, if the first <ul> doesn't have class attribute:
ul:not([class]) > li > a {
background-color: gold;
}
And if there are multiple <li> elements in the main <ul>, you can use :first-child pseudo-class to select only the first list item:
ul:not(.sub) > li:first-child > a {
background-color: gold;
}
UPDATED DEMO.
You can simply do
ul:not(.sub)>li:first-child>a{
background:red;
}
A pure css solution will be as follows
ul:not(.sub) > li:first-child > a
But the :not pseudo-selector is only supported in IE9 and newer.
http://jsfiddle.net/4aA7c/
CSS:
ul:not(.sub) > li:first-child > a {
background-color: gold;
}
Related
Good day all.
I have a problem, a structure like this:
<ul>
<li>
<span><span>
</li>
<li class="selected">
<span><span>
</li>
<li class="selected">
<span><span>
</li>
<li class="selected">
<span><span>
</li>
<li>
<span><span>
</li>
</ul>
I would like to select the first and last that have selected on the parent... the pseudo code should be like this:
li.selected span { background: #FF4D6E; color: white; }
li.selected:first-child span{border-radius:30px;}
li.selected:last-child span{border-radius:30px;}
the problem is that the span is inside the collection of .selected so I would like to have the first .selected, and its span
That is not possible because .selected class element is not the first of its parent. But you can do a workaround here by using sibling selectors as shown below:
/* first child */
li.selected span{
border-radius: 30px;
}
/* middle children */
li.selected + li.selected span{
border-radius: 0px;
}
/* last child */
li.selected ~ li.selected ~ li.selected span {
border-radius: 30px;
}
Above code is assuming you have only three .selected elements. If you have more and you know the count then change the last child code in the above with respect to the count. For example, if you have four .selected elements.
li.selected ~ li.selected ~ li.selected ~ li.selected span {
border-radius: 30px;
}
Example Fiddle
If you are using jQuery then do this:
$("li.selected span").css("background" : "#FF4D6E", "color" : "#fff");
$("li.selected:first-child span").css("border-radius" : "30px");
$("li.selected:last-child span").css("border-radius" : "30px");
To do this, I recommend taking a few hours to learn jquery. Here is a link to a good jquery tutorial. You can finish this tutorial in about three hours.
Jquery allows you to dynamically select any element that you want and modify it in pretty much any way you can imagine.
This is the code I would use to modify the CSS of the first and last span elements with .selected parents:
var $childOfSelected = $('.selected').children('span')
$childOfSelected.last().css({'border-radius':'30px'});
$childOfSelected.first().css({'border-radius':'30px'});
For the first child you can use this
li.selected span {
background: #FF4D6E;
color: white;
}
.selected:first-child,
:not(.selected) + .selected span {
border-radius: 30px;
}
<ul>
<li>
<span>not</span>
</li>
<li class="selected">
<span>selected</span>
</li>
<li class="selected">
<span>selected</span>
</li>
<li class="selected">
<span>selected</span>
</li>
<li>
<span>not</span>
</li>
</ul>
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 am trying to render a background color on the list item that is the first child of the unordered list.
HTML structure is as follows
<div class="nav-collapse">
<ul class="nav">
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
</ul>
</div>
and to apply the background color on the first child element I did
.nav-collapse > .nav:first-child {
background-color: orange;
}
It renders orange background to all list items.
I've played with slight variations but it doesn't make difference.
.nav-collapse > ul.nav:first-child
.nav-collapse > ul:first-child
Here is the Demo
Use the following:
.nav > li:first-child {
background-color: orange;
}
Working jsFiddle here
You were trying to style the first .nav item - which there is only one of. Simply change it to style the first li that is a direct child of .nav.
If you want to be more specific use:
.nav-collapse > .nav > li:first-child {
background-color: orange;
}
You can do it in many ways, try this too
ul.nav > li:first-child {
background-color: orange;
}
I guess I am not getting css child combinators.
I am trying to target just the first level on the li's with the following:
ul > li { color: green; }
<ul>
<li>Home</li>
<li>
Products
<ul>
<li>Product 1 </li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</li>
<li>Contact</li>
<li>News</li>
</ul>
http://jsfiddle.net/5vB3h/
NOTE: I also tried removing the spaces between >, with no luck.
You're using them fine, but all (properly marked-up) <li>s are children of <ul>s. You can specify the parent (in your jsFiddle, body):
body > ul > li
Or reverse the styles with the more specific case:
li ul > li {
color: black;
}
In the case of color, you need to use the second option anyways, because color is inherited. Here's the updated jsFiddle.
Your rule targets the child list items of any list. What you can do is create a second rule to recolor the other sub list items. For example:
ul > li {
color: green;
}
li li {
color:black
}
jsFiddle example
ul will match all the <ul> elements. Since every <li> is a child of one of the <ul>s…
You need to be more specific about which <ul> you mean. Perhaps add a class to it.
ul > li will select all the li elements in your document because they are all the children of ul elements.
If you apply a class to the parent like <ul class="top">, then you can use ul.top > li.
Add a class
li {color: blue;}
/* ^ added because maybe initial property is color: inherit;
If not, someone correct me */
ul.a > li { color: red; }
After this, add class to ul like <ul class="a" ...
http://jsfiddle.net/5vB3h/7/
EDIT (worked it out):
Okay so I ballsed up. Below is wrong.
ul:first-child > li { color: green; }
I found that when applying:
div>ul>li{color:green}
all lis went green... turns out that the li magically inherit the color of the li (odd behaviour as I assume the content had color:#000)
anyway... You need to explicitly set the color: to soemthing other than green to see the style working.
fiddle here
//html
<div>
<ul>
<li>Home</li>
<li>
Products
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</li>
<li>Contact</li>
<li>News</li>
</ul>
</div>
//css
li {color:black} //you have to have this (or something like * {color:black} OR body/html {color:black} as li seem to automatically inherit parent li color property
div>ul>li{ color: green; } //have to have parent.
In css how would I change on hover the color of test 1 but not color of list 1, 2,3?
<ul>
<li>
test 1
<ul>
<li> List 1</li>
<li> List 2</li>
<li> List 3</li>
</ul>
</li>
</ul>
One way is to specify the "default" color:
li:hover {
color:#f00;
}
li, li:hover li {
color:#000;
}
http://jsfiddle.net/D8dwt/1/
Another (cheat?) is to use more markup to wrap the content you want styled on hover:
li:hover span {
color:#f00;
}
<ul>
<li>
<span>test 1</span>
<ul>
<li> List 1</li>
<li> List 2</li>
<li> List 3</li>
</ul>
</li>
</ul>
This is one way to go:
ul > li {
color: red;
}
ul > li:hover {
color: blue;
}
ul > li:hover > ul > li {
color: red;
}
Add test1 into a div element so that it is in a separate leaf.
css:
div:hover {
color: blue;
}
Although there may be a way to do this without modifiying the html..
Give it it's own class and define it in your CSS file.
<li class="yourclass">
Or put it in tags and define the link in your CSS
li.yourclass a:hover {
text-decoration: underline ;
}