I have a div
tag containing several ul
tags.
I'm able to set CSS properties for the first ul
tag only:
div ul:first-child {
background-color: #900;
}
However, my following attempts to set CSS properties for each other ul
tag except the first one don't work:
div ul:not:first-child {
background-color: #900;
}
div ul:not(:first-child) {
background-color: #900;
}
div ul:first-child:after {
background-color: #900;
}
How can I write in CSS: "each element, except the first"?
This question is related to
css
css-selectors
li + li {
background-color: red;
}
not(:first-child)
does not seem to work anymore. At least with the more recent versions of Chrome and Firefox.
Instead, try this:
ul:not(:first-of-type) {}
This CSS2 solution ("any ul
after another ul
") works, too, and is supported by more browsers.
div ul + ul {
background-color: #900;
}
Unlike :not
and :nth-sibling
, the adjacent sibling selector is supported by IE7+.
If you have JavaScript changes these properties after the page loads, you should look at some known bugs in the IE7 and IE8 implementations of this. See this link.
For any static web page, this should work perfectly.
As I used ul:not(:first-child)
is a perfect solution.
div ul:not(:first-child) {
background-color: #900;
}
Why is this a perfect because by using ul:not(:first-child)
, we can apply CSS on inner elements. Like li, img, span, a
tags etc.
But when used others solutions:
div ul + ul {
background-color: #900;
}
and
div li~li {
color: red;
}
and
ul:not(:first-of-type) {}
and
div ul:nth-child(n+2) {
background-color: #900;
}
These restrict only ul level CSS. Suppose we cannot apply CSS on li
as `div ul + ul li'.
For inner level elements the first Solution works perfectly.
div ul:not(:first-child) li{
background-color: #900;
}
and so on ...
Since :not
is not accepted by IE6-8, I would suggest you this:
div ul:nth-child(n+2) {
background-color: #900;
}
So you pick every ul
in its parent element except the first one.
Refer to Chris Coyer's "Useful :nth-child Recipes" article for more nth-child
examples.
You can use your selector with :not
like bellow you can use any selector inside the :not()
any_CSS_selector:not(any_other_CSS_selector){
/*YOUR STYLE*/
}
you can use
:not
without parent selector as well.
:not(:nth-child(2)){
/*YOUR STYLE*/
}
More examples
any_CSS_selector:not(:first-child){
/*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
/*YOUR STYLE*/
}
any_CSS_selector:not(:checked){
/*YOUR STYLE*/
}
any_CSS_selector:not(:last-child){
/*YOUR STYLE*/
}
any_CSS_selector:not(:last-of-type){
/*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
/*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-of-type(2)){
/*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-child(2)){
/*YOUR STYLE*/
}
any_CSS_selector:not(:nth-child(2)){
/*YOUR STYLE*/
}
You can use any selector with not
p:not(:first-child){}
p:not(:first-of-type){}
p:not(:checked){}
p:not(:last-child){}
p:not(:last-of-type){}
p:not(:first-of-type){}
p:not(:nth-last-of-type(2)){}
p:not(nth-last-child(2)){}
p:not(:nth-child(2)){}
I didn't have luck with some of the above,
This was the only one that actually worked for me
ul:not(:first-of-type) {}
This worked for me when I was trying to have the first button displayed on the page not be effected by a margin-left option.
this was the option I tried first but it didn't work
ul:not(:first-child)
div li~li {
color: red;
}
Supports IE7
Source: Stackoverflow.com