How to get nth-of-type patterns to work like 1-2-2-1? : <p>Trying to get nth-of-type to style elements with this pattern: 1-2-2-1.</p>

<p>For example, it needs to look like this:</p>

<p>blue red</p>

<p>red blue</p>

<p>blue red</p>

<p>red blue</p>

<p>blue red</p>

<p>red blue</p>

<p>I have a lot of links set in 1 container, I am trying to get it to be in 2 columns and to be designed in alternating colors (like shown in the red-blue list here).</p>

<p>I tried messing around with nth-of-type, but couldn't figure it out, for now, I am using something like this:</p>

<pre><code>.post-link:nth-of-type(2) {code...}
.post-link:nth-of-type(3) {code...}
.post-link:nth-of-type(6) {code...}
.post-link:nth-of-type(7) {code...}
.post-link:nth-of-type(10) {code...}
.post-link:nth-of-type(11) {code...}
</code></pre>

<p>But this manual approach only takes me so far, links are being added to the page all the time and I need it to work without setting a specific rule for each box.</p>

<p>I tried something like this with no success as well:</p>

<pre><code>.post-link {background: #3c6d84;}
.post-link:nth-of-type(2n) {background: #fe7625;}
.post-link:nth-of-type(3n) {background: #fe7625;}
</code></pre>

<p>Trying to get the right pattern as mentioned above.</p>
