How to target every second element <p>-CodePudding

I want to change background-color in every second p element. But every p element is wraped up with another div element. All 5 div are included in one div .

<div >
        <div >
            <p ></p>
        </div>
        <div >
            <p ></p>
        </div>

I've tried to use like seudo class selector but i doesn't work

.positions p:nth-child(even) {
background-color: rgba(22, 22, 190, 0.8);

}

CodePudding user response：

I believe this is what you are looking for.

.positions:nth-child(even) p {
  background-color: rgba(22, 22, 190, 0.8);
}

<div >
  <div >
    <p >text 1</p>
  </div>
  <div >
    <p >text 2</p>
  </div>
    <div >
    <p >text 3</p>
  </div>
  <div >
    <p >text 4</p>
  </div>
    <div >
    <p >text 5</p>
  </div>
</div>

CodePudding user response：

You can simply specify a number (2) for every "n" elements like so: :nth-child(2n)

.positions:nth-child(2n) p {
  background-color: rgba(22, 22, 190, 0.8);
}