CSS - Background overwriting Bootstrap table-striped

I have the following class:

.highlight-lighter {
   background-color: #fafafa;
}

and the following html where I'm trying to implement a striped table using bootstrap css:

<div class="highlight-lighter ">
    <table class="table table-striped">
       <tbody>
          <tr class="row">
             <th class="col-sm-6">Foo</th>
             <th class="col-sm-6">Bar</th>
          </tr>
          <tr>
             <td class="col-sm-6">1</td>
             <td class="col-sm-6">2</td>
          </tr>
         <tr>
             <td class="col-sm-6">3</td>
             <td class="col-sm-6">4</td>
         </tr>
      </tbody>
    </table>
    <div>
        <p>some text</p>
    </div>
</div>

When I use the highlight-lighter class as per above the table no longer appears striped - the highlight-lighter class seems to override any striping of table rows?

I know I can fix by moving the highlight-lighter class to the last div but I want to know why it's overriding the the table-striped class as I would prefer to keep it as it is i.e. in the parent div?