Q:

Target child of alternate 

This is more of a CSS question, but I will add it here since any underscores developer might have encountered it.
I have a index page layout as:
<article>
<div class="xyz">...</div>
</article>

<article>
<div class="xyz">...</div>
</article>

<article>
<div class="xyz">...</div>
</article>

<article>
<div class="xyz">...</div>
</article>

I want to target the div with the class xyz of alternate article and float it to right. I tried "article:nth-child(2n+1).xyz" to add a float right to it, but it does not seem to work. Is there any way I can target it?
Thanks for any help,

A:

You forgot the space between article:nth-child(2n+1) and .xyz.

article:nth-of-type(2n+1) .xyz {
  color: red;
}
<article>
  <div class="xyz">Red</div>
</article>

<article>
  <div class="xyz">Black</div>
</article>

<article>
  <div class="xyz">Red</div>
</article>

<article>
  <div class="xyz">Black</div>
</article>

To alternate starting with the second one, use this:

article:nth-of-type(2n) .xyz {
  color: red;
}
<article>
  <div class="xyz">Black</div>
</article>

<article>
  <div class="xyz">Red</div>
</article>

<article>
  <div class="xyz">Black</div>
</article>

<article>
  <div class="xyz">Red</div>
</article>

