title: CSS selector for child of EITHER parent A or B (best practice)?
body: <p>In short, I'd like to select a child element that has <strong>either</strong> Parent A <strong>or</strong> Parent B.</p>
  
  <p>I'm wondering if there's a way to simplify my selectors in this scenario, or if what I have here is the only way to do it.  Also, is there a best practice in this scenario?  Below are some simplified examples:</p>
  
  <pre><code>/* long example (probably not best practice) */
      #parent-a .common-child {
          color: #000;
      }
      #parent-b .common-child {
          color: #000;
      }
  
  /* shortest example I know of */
      #parent-a .common-child, #parent-b .common-child {
          color: #000;
      }
  </code></pre>
  
  <p>Is there any way to do something like:</p>
  
  <pre><code>#parent-a||#parent-b .common-child {
      color: #000;
  }
  </code></pre>
  
  <p>It might not look like a big deal in these simple examples, but in my actual CSS I have several dozen selectors that chain down through the DOM a bit, and I want to optimize the file size / readability.</p>
  
  <p>Thanks!</p>