title: CSS: how to cascade class-specific style to children
body: <p>Suppose I have an HTML table that has been assigned to the class <code>dependency_table</code>.</p>
  
  <p>How can I style the <code>tr</code>, <code>th</code>, and <code>td</code> children of that that <em>specific</em> table without having to put <code>class="dependency_table"</code> in all of the child tags?</p>
  
  <p>Here is what I have tried so far:</p>
  
  <pre><code>/* --- DEPENDENCY TABLE STYLING --- */
  .dependency_table {
      border-collapse: collapse;
      color: pink;
  }
  
  .dependency_table ~ td {
      background: #FAFAFA;
      text-align: center;
  }
  
  .dependency_table ~ th{
       background: #DFDFDF;  /* Darken header a bit */
       font-weight: bold;
  }
  </code></pre>
  
  <p>The general sibling selector hasn't worked for me yet with this syntax. What is the correct way of doing this?</p>