How to skip first child?

CssCss Selectors

Css Problem Overview

<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.

Css Solutions

Solution 1 - Css

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; }

Solution 2 - Css

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:

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.

Solution 3 - Css

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.

Solution 4 - Css

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.

Solution 5 - Css

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

Solution 6 - Css

:nth-child(1n+2) worked well for me. This skips the first child and continues to the rest of the elements.

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

Hope this helps.

Categories
Recommended Css Solutions
Recommended Css Selectors Solutions

Previous Solution:

Converting .jks to p12

Pkcs#12Jks

Next Solution:

Upgrade package without upgrading dependencies using pip?

PythonVirtualenvPip

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJitendra VyasView Question on Stackoverflow
Solution 1 - CssQuentinView Answer on Stackoverflow
Solution 2 - CssBoltClockView Answer on Stackoverflow
Solution 3 - CssjjgarzaView Answer on Stackoverflow
Solution 4 - CssRudieView Answer on Stackoverflow
Solution 5 - CssMonteCristoView Answer on Stackoverflow
Solution 6 - CssAlfredo BarillasView Answer on Stackoverflow