CSS selector for nth nested child-CodePudding

Is there a CSS selector to select the nth element with class "someclass" when the elements you need to match are "nested":

<div>
   <p><span></span></p>
   <p><span ></span></p>
   <p><span></span></p>
   <p><span ></span></p>
   <p><span ></span></p>
   <p><span ></span></p>
   <p><span></span></p>
   .
   .
   .
</div>

it's not possible to move the class to the the p tags unfortunately.

I've tried:

div p div.someclass:nth-child(2n)
div p div.someclass:nth-of-type(2n)

none seem to quite do exactly what I need.

CodePudding user response：

You can target the :nth-child parent and get its contained element like so:

HTML:

<div class='container'>
  <p><span>xxx</span></p>
  <p><span >xxx</span></p>
  <p><span>xxx</span></p>
  <p><span >xxx</span></p>
  <p><span >xxx</span></p>
  <p><span >xxx</span></p>
  <p><span>xxx</span></p>
 </div>

CSS

.container p:nth-child(2) span {
  color: red;
}

CodePudding user response：

Try this css:

.someclass:nth-child(2n) {}

Source: :nth-child