title: Any way to style child element of :nth-child(an + b) selector?
body: <p>I'm trying to adjust the colors of a nav menu to alternate between colors, using :nth-child(an + b). Only I don't want to style the nth-child itself, but the child anchor text inside of the selected <code>&lt;li&gt;</code></p>
  
  <p>The basic setup:</p>
  
  <pre><code>&lt;ul class="color-text"&gt; 
      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The styling:</p>
  
  <pre><code>.color-text li:nth-child(7n + 1) { // I'm alternating between seven colors
    color: --1st-color;
  }
  </code></pre>
  
  <p>I'm not using any actual values, as they're not important. The issue is I can't figure out how to target the child  of the selected <li>. Any suggestions? Thanks!</p>
  
  <p>Went on MDN, W3Schools etc and can't seem to find a relevant tutorial.</p>
  
  <pre><code>.color-text li:nth-of-type(7n + 1) a {
    color: red;
  }
  </code></pre>
  
  <p>I want to change the text color of the child anchor text of the selected <code>&lt;li&gt;</code></p>