Clash Royale CLAN TAG#URR8PPP

How can I use a not:first-child selector?

I have div tag containing several ul tags.

div

ul

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

ul

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



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

ul

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

6 Answers
6

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:

:not

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.

This CSS2 solution ("any ul after another ul") works, too, and is supported by more browsers.

ul

ul

div ul + ul
background-color: #900;



Unlike :not and :nth-sibling, the adjacent sibling selector is supported by IE7+.

:not

:nth-sibling

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.

ul ul div ul

ul

Well since :not is not accepted by IE6~8, I would suggest you this:

:not

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



So you pick every ul in its parent element except the first one.

ul

Refer to Chris Coyer's "Useful :nth-child Recipes" article for more nth-child examples.

nth-child

div li~li
color: red;



Supports IE7

not(:first-child) does not seem to work anymore. At least with the more recent versions of Chrome and Firefox.

not(:first-child)

Instead, try this:

ul:not(:first-of-type)


ul:not(:first-child)

ul

ul

p

ul:not(:first-of-type)

ul

ul

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)

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)

ul:not(:first-child)

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.