title: CSS selector: How to select element sibling AND element itself?
body: <p>So I have a set of links, and want to apply a style [let's say <code>color: red;</code>] to those links only if they are siblings in the DOM. For example, if I have three links:</p>
  
  <pre><code>&lt;a class="nav-link-primary"&gt;link&lt;/a&gt;
  &lt;a class="nav-link-secondary"&gt;link&lt;/a&gt;
  &lt;a class="nav-link-tertiary"&gt;link&lt;/a&gt;
  </code></pre>
  
  <p>They should <strong>all</strong> be red.</p>
  
  <p>But if I have something like this:</p>
  
  <pre><code>&lt;a class="nav-link-primary"&gt;link&lt;/a&gt;
  &lt;span&gt;Lorem&lt;/span&gt;
  &lt;a class="nav-link-secondary"&gt;link&lt;/a&gt;
  &lt;a class="nav-link-tertiary"&gt;link&lt;/a&gt;
  </code></pre>
  
  <p>Then only the <strong>last two</strong> links should be red, as they are siblings. Is it possible to do this with CSS?</p>
  
  <p>Here is what I've tried</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>.nav-link-primary ~ .nav-link-primary,
  .nav-link-primary ~ .nav-link-secondary,
  .nav-link-primary ~ .nav-link-tertiary,
  .nav-link-secondary ~ .nav-link-primary,
  .nav-link-secondary ~ .nav-link-secondary,
  .nav-link-secondary ~ .nav-link-tertiary,
  .nav-link-tertiary ~ .nav-link-primary,
  .nav-link-tertiary ~ .nav-link-secondary,
  .nav-link-tertiary ~ .nav-link-tertiary {
    color: red;
  }
  
  .nav-link-primary:first-child + .nav-link-secondary{
    color: red;
  }
  
  .nav-link-secondary:first-child + .nav-link-primary{
    color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a class="nav-link-primary"&gt;link&lt;/a&gt;
  &lt;a class="nav-link-secondary"&gt;link&lt;/a&gt;
  &lt;a class="nav-link-tertiary"&gt;link&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is my CodePen link: <a href="http://codepen.io/obliviga/pen/jryPgO" rel="nofollow">http://codepen.io/obliviga/pen/jryPgO</a></p>
  
  <p>This does not make the first link red, even though it has a sibling defined in the first block of selectors. Any ideas?</p>