How to skip first child?

Quentin's :not() solution works great for modern browsers:

p:not(:first-child) { color: red; }

His alternative for older browsers also works well, except it makes use of an overriding rule for the first child. It's not required, however...

You can simply use a sibling selector to apply the same rule as the one above, without the need to override it for p:first-child. Either one of these rules will work:

  • The adjacent sibling selector, which matches any p that comes directly after a p:

    p + p { color: red; }
    
  • The general sibling selector, which matches any p that comes anywhere after a p:

    p ~ p { color: red; }
    

Both combinators work identically here; the subtle differences between them only apply when you have other elements in the mix. Refer to the links provided for details.


I think :nth-child() will do the trick.

p:nth-child(n+2){
  background-color:red;
}

This styles all of the p tags except for the first because it starts on the 2nd child. You could then style the first p tag separately with p:first-child.


With the negation pseudo-class:

p:not(:first-child) { color: red; }

Browser support is very strong now, but alternatives include:

p { color: red; }
p:first-child { color: black; }

and:

* + p { color: red; }