How do I target 2nd and 3rd elements with nth-child using just one line of css?

Question

I would like to target the 2nd and 3rd elements in my div using nth-child but I only want to use one line of css instead of two.

p:nth-child(2) {
  color: red;
}
p:nth-child(3) {
  color: red;
}

<div>
  <p>One</p>
  <p>Two</p>
  <p>Three</p>
  <p>Four</p>
</div>

Is there any way to use the nth-child selector to target both?

Answer 1

You can specifically target each p tag by its nth-child and separate with a comma.

Or you can reduce selectors by specifying a range like:

JS Fiddle

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