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 ap
:p + p { color: red; }
The general sibling selector, which matches any
p
that comes anywhere after ap
: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; }