This question already has answers here:
Select all 'tr' except the first one
(10 answers)
Closed 8 years ago.
I have a simple unordered list:
<ul id="sub_menu">
<li></li>
<li></li>
<li></li>
<!-- and some more -->
</ul>
I removed any of the list-style-types and created my own with a :pseudo class
#sub_menu ul li:before {
content: "• ";
color: #FFFFFF;
}
what I know would like to know is, what would be the CSS selector look like, if I would like to remove the pseudo class for the first li item of this list.
Thanks
You can exclude the first li, using the :not() selector:
#sub_menu ul li:not(:first-child):before {
content: "• ";
color: #FFFFFF;
}
If you need IE8 compatibility, you may use a combination of sibling selectors, like:
#sub_menu ul li:first-child ~ li:before {
content: "• ";
color: #FFFFFF;
}
EDIT
Also, just a side-note... According to your html, the selector is wrong. If the ul has the id of #sub_menu, it should be
#sub_menu li
instead of
#sub_menu ul li
The following selectors will both work down to IE7:
#sub_menu ul li + li::before
#sub_menu ul li ~ li::before
They behave the same as:
#sub_menu ul li:not(:first-child)::before
Another alternative is the
#sub_menu ul li:nth-child(n+2):before {
content: "• ";
color: #FFFFFF;
}
Related
I have a list of tags I want to display horizontally. Now for each <li>, but the last one, I want to add a , after the item.
Now, I can do that of course:
ul.tags {
list-style: none;
}
ul.tags > li {
display: inline;
}
ul.tags > li:after {
content: ", ";
}
ul.tags > li:last-of-type:after {
content: "";
}
Now I thought about combining the last two rules, like:
ul.tags > li:not(ul.tags > li:last-of-type):after {
content: ", ";
}
But this does not work. How can I select all but the last <li>?
All that you need is just the :last-of-type within the :not (like in the below snippet). The :not accepts only simple selectors as argument.
Below is what the specifications say about simple selectors:
A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.
ul.tags > li:not(:last-of-type):after {
content: ", ";
}
ul.tags {
list-style: none;
}
ul.tags > li {
display: inline;
}
<ul class='tags'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</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 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 */}
How to add > before the third <li> element without adding new any classes or id's?
Here is the JsFiddle.
HTML:
<ol class="breadcrumb-tasks">
<li>Ethernet</li>
<li>Compputer</li>
<li>Design</li>
</ol>
CSS:
.breadcrumb-tasks{
padding: 0;
list-style: none;
}
.breadcrumb-tasks li {
color: #999;
display: inline-block;
}
.breadcrumb-tasks li + li:before {
color: #ccc;
content: "/\00a0";
}
For the old browsers which don't support :nth-child() pseudo class you could use adjacent sibling selector as follows:
.breadcrumb-tasks li + li + li:before {
content: ">\00a0";
}
And override the content for 4th, 5th,... list items as:
.breadcrumb-tasks li + li:before, /* selects 2nd+ list items */
.breadcrumb-tasks li + li + li +li:before { /* selects 4th+ list items */
color: #ccc;
content: "/\00a0";
}
WORKING DEMO
But for modern browsers support CSS3 selector (including IE9+):
.breadcrumb-tasks li:nth-child(3):before {
content: ">\00a0";
}
WORKING DEMO.
This way, it is always the last one (if you have more than 3).
ol li:last-child:before{
content: ">";
}
JsFiddle
li:nth-child(3):before
{
content: ">";
}
FIDDLE
.breadcrumb-tasks li:last-child:before { content: "› "; }
I have a nav ul li:after definition in a css like:
nav ul:not(.first) li:after {
margin-left: 10px;
content: '';
color: #bbb;
}
But to get rid of the not(.first), because it is affecting other "nav" in the page...
I want to apply the properties to a specific nav ul, li:after, the others nav are fine, only this I want to apply this style:
<nav>
<ul>
<li id="all">All</li>
<li id="web">WEB</li>
<li id="print">DesignD</li>
<li id="illustration">Illustration</li>
</ul>
</nav>
Is it possible? How to do it?
Normally I'd suggest using the style attribute but sadly I doesnt really work with :later.
So as already mentioned you will have to work a class or an id and then targeting it in css.
I'm pretty sure I know what your taking about, but forgive me if I'm wrong. You would like to apply those styles to just the first li?
In that case you should call out
nav ul:first-child li:after {
margin-left: 10px;
content: '';
color: #bbb;
}