title: Can you make the distance between selectors matter for specificity in CSS?
body: <p>Originally split off from <a href="https://stackoverflow.com/questions/73421755/can-a-component-be-styled-based-on-its-closest-parent-in-pure-css">this</a> question.</p>
  <p>If I use this css, the <code>span</code>'s text color is determined by its closest parent (i.e. text is blue):</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.blue {
      color: blue;
  }
  
  .green {
      color: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="green"&gt;
      &lt;!-- more divs with color classes --&gt;
          &lt;div class="blue"&gt;
              &lt;div&gt;
                  &lt;!-- Unknown depth without color classes --&gt;
                      &lt;div&gt;
                          &lt;div class="my-component"&gt;
                              &lt;span&gt;Hello World&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;!-- --&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;!-- --&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>However, I want this behavior for <code>.my-component</code> specifically. I therefore added <code>.my-component</code> to my selector but suddenly, the <code>span</code>'s text color is determined by the definition order (i.e. text is green):</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.blue .my-component {
      color: blue;
  }
  
  .green .my-component {
      color: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="green"&gt;
      &lt;!-- more divs with color classes --&gt;
          &lt;div class="blue"&gt;
              &lt;div&gt;
                  &lt;!-- Unknown depth without color classes --&gt;
                      &lt;div&gt;
                          &lt;div class="my-component"&gt;
                              &lt;span&gt;Hello World&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;!-- --&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;!-- --&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I understand <em>why</em> this is (specificity; see <a href="https://stackoverflow.com/questions/73421755/can-a-component-be-styled-based-on-its-closest-parent-in-pure-css">Can a component be styled based on its closest parent in pure CSS?</a>) but would like to know <em>how to work around it</em>.</p>
  <p>Is there a way to get the second example to behave as the first (only using CSS/HTML)?</p>