By OTAR


2012-09-05 21:09:16 8 Comments

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"?

7 comments

@Gufran Hasan 2019-01-24 15:19:07

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

@ed1nh0 2013-02-22 21:07:48

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.

@newtron54 2018-08-08 13:13:25

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)

@Vinny Troia 2017-08-19 16:36:14

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

@Ilya Streltsyn 2017-08-21 16:44:02

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.

@Jon 2012-09-05 21:11:23

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.

@Simon_Weaver 2014-07-27 19:48:41

do you know exactly which versions this isn't supported on?

@Jon 2014-07-29 09:15:31

@Simon_Weaver: In practice everything but IE < 9 supports it. A great resource to get this kind of information is caniuse.com.

@iorrah 2018-06-22 13:17:45

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!

@zloctb 2014-10-16 11:10:18

div li~li {
    color: red;
}

Supports IE7

@Alex Quinn 2013-03-19 21:33:05

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.

@Leven 2013-09-11 13:30:33

The '+' selector doesn't seem to work in IE7.

@Alex Quinn 2013-09-18 02:18:35

@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?

@Brian H. 2016-12-13 12:08:51

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

Related Questions

Sponsored Content

14 Answered Questions

[SOLVED] How to apply a CSS 3 blur filter to a background image

26 Answered Questions

[SOLVED] Is there a CSS parent selector?

  • 2009-06-18 19:59:36
  • jcuenod
  • 1616130 View
  • 2737 Score
  • 26 Answer
  • Tags:   css css-selectors

13 Answered Questions

[SOLVED] Is there a "previous sibling" CSS selector?

  • 2009-11-30 04:06:36
  • Jourkey
  • 536091 View
  • 1156 Score
  • 13 Answer
  • Tags:   css css-selectors

18 Answered Questions

[SOLVED] CSS selector for first element with class

  • 2010-04-26 22:51:13
  • Rajat
  • 819096 View
  • 791 Score
  • 18 Answer
  • Tags:   css css-selectors

14 Answered Questions

[SOLVED] I do not want to inherit the child opacity from the parent in CSS

  • 2011-04-24 11:55:02
  • Lion King
  • 166027 View
  • 312 Score
  • 14 Answer
  • Tags:   css

8 Answered Questions

[SOLVED] Which characters are valid in CSS class names/selectors?

  • 2009-01-15 23:37:39
  • Darryl Hein
  • 349057 View
  • 1123 Score
  • 8 Answer
  • Tags:   css css-selectors

11 Answered Questions

[SOLVED] What does the "+" (plus sign) CSS selector mean?

  • 2009-07-16 19:26:50
  • gday
  • 285256 View
  • 673 Score
  • 11 Answer
  • Tags:   css css-selectors

15 Answered Questions

[SOLVED] How do you keep parents of floated elements from collapsing?

14 Answered Questions

[SOLVED] Margin on child element moves parent element

  • 2009-11-19 11:02:47
  • Robert Koritnik
  • 140980 View
  • 350 Score
  • 14 Answer
  • Tags:   css xhtml margin nested

15 Answered Questions

[SOLVED] Managing CSS Explosion

  • 2010-02-12 16:03:34
  • JasCav
  • 42662 View
  • 673 Score
  • 15 Answer
  • Tags:   css organization

Sponsored Content