1124

I have div tag containing several ul tags.

If I trying set CSS properties only for the first ul tag, and this code works:

div ul:first-child {
    background-color: #900;
}

When I want set CSS properties for each ul tag except the first, I tried this:

div ul:not:first-child {
    background-color: #900;
}

also this:

div ul:not(:first-child) {
    background-color: #900;
}

and this:

div ul:first-child:after {
    background-color: #900;
}

But to no effect. How must I write in CSS: "each element, except the first"?

1

13 Answers 13

1933

One of the versions you posted actually works for all modern browsers (where CSS selectors level 3 are supported):

div ul:not(:first-child) {
    background-color: #900;
}

If you need to support legacy browsers, or if you are hindered by the :not selector's limitation (it only accepts a simple selector as an argument) then you can use another technique:

Define a rule that has greater scope than what you intend and then "revoke" it conditionally, limiting its scope to what you do intend:

div ul {
    background-color: #900;  /* applies to every ul */
}

div ul:first-child {
    background-color: transparent; /* limits the scope of the previous rule */
}

When limiting the scope use the default value for each CSS attribute that you are setting.

7
  • do you know exactly which versions this isn't supported on? Commented Jul 27, 2014 at 19:48
  • 12
    @Simon_Weaver: In practice everything but IE < 9 supports it. A great resource to get this kind of information is caniuse.com.
    – Jon
    Commented Jul 29, 2014 at 9:15
  • 2
    Hmm.. watch out for the the restrictions of the first solution: caniuse.com/#feat=css-not-sel-list The second one sounded more reasonable for me. Thanks!
    – biker856
    Commented Jun 22, 2018 at 13:17
  • 1
    @iorrah your caniuse link is for a list of selectors, and yes, support is very limited still. The OP is not using a list of selectors. So I think https://caniuse.com/#feat=css-sel3 is more appropriate with great support beyond the days of IE8.
    – secretwep
    Commented Jan 13, 2020 at 17:48
  • This works even without the div element at the start in chrome. Commented Jan 22, 2020 at 13:12
184

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.

2
  • 4
    @Leven: That quirksmode link says it should work in IE7, but only statically. If your JS places another element in front of it, it might not be updated correctly. Is that the issue you saw?
    – Alex Quinn
    Commented Sep 18, 2013 at 2:18
  • might be worth noting that in a sequence of elements like: ul ul div ul (where these elements are siblings), only the second ul will be selected, since the last one does not have a ul previous to itself
    – Brian H.
    Commented Dec 13, 2016 at 12:08
100

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.

3
  • 42
    Considering the answer was from 2013?
    – aasukisuki
    Commented May 8, 2019 at 14:57
  • 1
    just curious why is this answer not getting more votes since it also cover legacy browser and looks more straight forward to me, is there any potential pitfall in using this? tks
    – kennethlkf
    Commented Apr 2, 2022 at 3:55
  • 1
    Creativity is a beautiful thing and this question and its answers are something for the ages.
    – brasofilo
    Commented Jul 21, 2022 at 1:37
50

You can use "first-child" pseudo-class inside the "not()" pseudo-class.

div ul:not(:first-child){
    background-color: #900;
}
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo Classes</title>
</head>
<body>
  <div>
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Products</a></li>
    </ul>
    <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
    <ul>
       <li><a href="#">Services</a></li>
       <li><a href="#">Downloads</a></li>
    </ul>
    <ul>
       <li><a href="#">Facebook</a></li>
       <li><a href="#">Instagram</a></li>
    </ul>
  </div>
</body>
</html>

Alternative ways,

  1. With "nth-child()", It will select nth number of child.

div ul:not(:nth-child(1)){
    background-color: #900;
}
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo Classes</title>
</head>
<body>
  <div>
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Products</a></li>
    </ul>
    <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
    <ul>
       <li><a href="#">Services</a></li>
       <li><a href="#">Downloads</a></li>
    </ul>
    <ul>
       <li><a href="#">Facebook</a></li>
       <li><a href="#">Instagram</a></li>
    </ul>
  </div>
</body>
</html>

  1. With "nth-of-type()", It will select nth number of element of its parent.

    div ul:not(:nth-of-type(1)){
        background-color: #900;
    }
    <html>
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Pseudo Classes</title>
    </head>
    <body>
      <div>
        <ul>
           <li><a href="#">Home</a></li>
           <li><a href="#">Products</a></li>
        </ul>
        <ul>
           <li><a href="#">About</a></li>
           <li><a href="#">Contact</a></li>
        </ul>
        <ul>
           <li><a href="#">Services</a></li>
           <li><a href="#">Downloads</a></li>
        </ul>
        <ul>
           <li><a href="#">Facebook</a></li>
           <li><a href="#">Instagram</a></li>
        </ul>
      </div>
    </body>
    </html>

  2. With "nth-last-child()", It will select nth number of child counting from the last child. If you have 4 "ul" tags, you can write like this.

div ul:not(:nth-last-child(4)){
    background-color: #900;
}
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo Classes</title>
</head>
<body>
  <div>
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Products</a></li>
    </ul>
    <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
    <ul>
       <li><a href="#">Services</a></li>
       <li><a href="#">Downloads</a></li>
    </ul>
    <ul>
       <li><a href="#">Facebook</a></li>
       <li><a href="#">Instagram</a></li>
    </ul>
  </div>
</body>
</html>

  1. With "nth-last-of-type()", It will select nth number of element of its parent counting from the last child. If you have 4 "ul" tags, you can write like this.

div ul:not(:nth-last-of-type(4)){
    background-color: #900;
}
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo Classes</title>
</head>
<body>
  <div>
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Products</a></li>
    </ul>
    <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
    <ul>
       <li><a href="#">Services</a></li>
       <li><a href="#">Downloads</a></li>
    </ul>
    <ul>
       <li><a href="#">Facebook</a></li>
       <li><a href="#">Instagram</a></li>
    </ul>
  </div>
</body>
</html>

These are some of the best ways to handle these kind of situations.

27

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) {}
1
  • 9
    They both work, but they have different meaning. ul:not(:first-child) means literally "any ul element that is not first child of its parent", so it won't match even the 1st ul if it's preceded by another element (p, heading etc.). On the contrary, ul:not(:first-of-type) means "any ul element except the 1st ul in the container". You are right that OP probably needed the latter behavior, but your explanation is rather misleading. Commented Aug 21, 2017 at 16:44
23
div li~li {
    color: red;
}

Supports IE7

0
16

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)){}
13

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):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*/
}
4

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)

2

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 ...

0
li + li {
    background-color: red;
}
0

This is a simple way to change the background color of the element placed AFTER your basic "ul" - elements, except the first one:

See :nth-child() documentation for more details on how this works.

div ul:nth-child(n+2)::after {
    background-color: #900;
}
-2
div ul::nth-child(n+2){
    background-color: #900;
}

Is working too

Not the answer you're looking for? Browse other questions tagged or ask your own question.