SmartestVEGA SmartestVEGA - 6 days ago 5
CSS Question

CSS nth selection

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?

Answer

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>

Comments