<div id="main">
<p> one </p>
<p> two </p>
<p> three </p>
<p> four </p>
<p> five </p>
<div>
I don't want to apply css on first <p>One</p>
p {color:red}
I need just opposite of :first-child
.
<div id="main">
<p> one </p>
<p> two </p>
<p> three </p>
<p> four </p>
<p> five </p>
<div>
I don't want to apply css on first <p>One</p>
p {color:red}
I need just opposite of :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; }
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
.
Works everytime and doesn't need undoing:
p + p {
/* do 15 special things */
}
It takes every P that was preceded by a P. Don't set a property to undo it later. You should only add, if you can help it, not subtract.
You can also use "tilde" ( ~ ) operator
<!DOCTYPE html>
<html>
<head>
<style>
p ~ p {
background:#ff0000;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</body>
</html>
Here is the JSFiddle demo http://jsfiddle.net/RpfLa/344/
Did a quick test on FF 17, Chrome 23, Safari 5.1, IE9, IE1-8 on compaitbility mode