Question

I’m seeing an odd outcome in some CSS/HTML code that I’ve written. I have two different classes in my CSS; let’s call them classA and classB. Class A defines tables to have no borders:

div.classA table, th, td { borders:none }

Class B defines tables to have collapsed grey borders:

div.classB table, th, td  { border:1px solid grey }

My HTML then has

<div class="classB">
  <table>
    <thead>
      <th>Text</th><th>More text</th>
     </thead>
  </table>
</div>

The table heads (which, as classB should have borders) appear with no borders. When I use Firefox to inspect the page, it shows me that classA has overridden the settings of classB, even though the table is within a classA div element.

What am I missing?

Answer 1

Your selectors are not quite right. I think you want this:

div.classA table, div.classA th, div.classA td { border: 0; }

div.classB table, div.classB th, div.classB td  { border: 1px solid grey; }

(You need the div.classname before each tag.)