not first-child selector

Question

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

User · Accepted Answer

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.

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

div li li       color  red      Supports IE7

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

li   li       background-color  red

User · Answer

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

[css] not:first-child selector

Examples related to css

Examples related to css-selectors