2

I have 4 paragraphs <p>. I need to select every paragraphs except leaving the first two paragraphs on this structure:

<div class="right">
  <a></a>
  <p>heading</p>
  <p></p>
  <p style="margin-bottom:6.0pt;vertical-align:baseline;">
    <span style="color:#2F2F2F ;">hi....Each day the world meets your expectations. It's no secret that your perspective shapes your experience.
    What's remarkable, however, is how belief builds awareness; and how with every insight, doors open, new futures unfold 
    and once-only-dreamed-of possibilities become everyday realities.</span>
  </p>
  <p style="margin-bottom:6.0pt;vertical-align:baseline;">
    <span style="color:#2F2F2F ;">Each day the world meets your expectations. It's no secret that your perspective shapes your experience.
    What's remarkable, however, is how belief builds awareness; and how with every insight, doors open, new futures unfold 
    and once-only-dreamed-of possibilities become everyday realities.</span>
  </p>

  <p style="margin-bottom:6.0pt;vertical-align:baseline;">
    <span style="color:#2F2F2F ;">Each day the world meets your expectations. It's no secret that your perspective shapes your experience.
    What's remarkable, however, is how belief builds awareness; and how with every insight, doors open, new futures unfold 
    and once-only-dreamed-of possibilities become everyday realities.</span>
  </p>
</div>

I wrote below css,

.right p:not(:nth-child(4)){
  background:yellow;
}

but it is selecting only first,third and fourth.

But we need only third and fourth only NOT first and second

how to achieve this?

14

2 Answers 2

6

You could use :nth-of-type instead, try this:

.right p:nth-of-type(n+3) {
  background:yellow;
}
<div class="right">
  <a href="#">I'm a link</a>
  <p>heading</p>
  <p>empty p</p>
  <p style="margin-bottom:6.0pt;vertical-align:baseline;">
    <span style="color:#2F2F2F ;">hi....Each day the world meets your expectations. It's no secret that your perspective shapes your experience.
What's remarkable, however, is how belief builds awareness; and how with every insight, doors open, new futures unfold 
and once-only-dreamed-of possibilities become everyday realities.</span>
  </p>
  <p style="margin-bottom:6.0pt;vertical-align:baseline;">
    <span style="color:#2F2F2F ;">Each day the world meets your expectations. It's no secret that your perspective shapes your experience.
What's remarkable, however, is how belief builds awareness; and how with every insight, doors open, new futures unfold 
and once-only-dreamed-of possibilities become everyday realities.</span>
  </p>

  <p style="margin-bottom:6.0pt;vertical-align:baseline;">
    <span style="color:#2F2F2F ;">Each day the world meets your expectations. It's no secret that your perspective shapes your experience.
What's remarkable, however, is how belief builds awareness; and how with every insight, doors open, new futures unfold 
and once-only-dreamed-of possibilities become everyday realities.</span>
  </p>
</div>

3
  • only leaving first item, i need to leave ,first and second Nov 28, 2016 at 13:47
  • @SmartestVEGA it's leaving the first and second .... first is heading, second is empty p.... like your markup
    – DaniP
    Nov 28, 2016 at 13:48
  • off course @SmartestVEGA just add one to the selector like : p:nth-of-type(n+4)
    – DaniP
    Nov 28, 2016 at 13:52
0

You could use :nth-child or :nth-type-of pseudo-class to achieve the result:

.right p:nth-of-type(n + 3) {
  background: green;
}
<div class="right">
<a href="">a link</a>
  <p>heading</p>
  <p>other p</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae nulla asperiores consequuntur quam numquam, fugit iusto, unde necessitatibus ullam nemo natus nobis iste delectus quae tenetur sunt qui odio blanditiis.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio commodi placeat voluptatem dolor, ullam quidem facere incidunt doloribus veritatis culpa nostrum magni tempora possimus consequatur ipsum aperiam ipsam, consectetur unde.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio commodi placeat voluptatem dolor, ullam quidem facere incidunt doloribus veritatis culpa nostrum magni tempora possimus consequatur ipsum aperiam ipsam, consectetur unde.</p>

</div>

This Fiddle

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.