Cascading CSS styles are a little painful to overpower.

Let's say...

1. You have some HTML in an app like so:
   <div class="dotty">
      <table>
         <tr>
            <td nowrap>I like:</td>
            <td>
               <table>
                  <tr>
                     <td>cats</td>
                     <td>grapes</td>
                  </tr>
                  <tr>
                     <td nowrap>not dying</td>
                     <td>Texas</td>
                  </tr>
               </table>
            </td>
         </tr>
      </table>
   </div>
    
2. And, your stylesheet looks like this:
   .dotty {
      padding: 13px;
   }
   .dotty table {
      border: 1px #FF0000 dotted;
   }
    
3. Creating something that looks like this:

   I like:

   cats grapes not dying Texas

But you really don't want the cascading effect to put a border on the inner table.

1. You just want something like so:

   I like:

   cats grapes not dying Texas

But the dotty class is used pervasively in your application and you dare not alter it. Also, you don't want to write your own dotty because you don't understand what all dotty does because someone else made dotty. What will you do? There are only a few things you can do and they will quickly make you fall out of love with the cascading part of cascading stylesheets as you'll realize that whenever you're clever and you make things cascade that you are in fact painting yourself into a corner that will require others to hack in order to get around your madness. If you're going to have cascading effects they better be small in scope and not applied to, for example, the body tag down. If you just make a new class called nada to apply to the inner table like so:

.nada {
   border: none;
}

 
 

...you will be disappointed when nothing changes! I'm serious. It makes my nose want to bleed in disbelief but that is how it is. You will find that cascading effects always beat direct effects and thus nothing will change. There are three ways around this and they are all bad. One is like so:

.nada {
   border: none !important;
}

 
 

Yuck, I feel dirty already. An inline style parameter with border: none; as a value at the second table tag is another solution and it's hard to say which of these two fixes is worse. There is a slightly better third way, and, no, it's not using an id as that won't work either. The third way is to change up the HTML like so:

<div class="dotty">
   <table>
      <tr>
         <td nowrap>I like:</td>
         <td>
            <div class="nada">
               <table>
                  <tr>
                     <td>cats</td>
                     <td>grapes</td>
                  </tr>
                  <tr>
                     <td nowrap>not dying</td>
                     <td>Texas</td>
                  </tr>
               </table>
            </div>
         </td>
      </tr>
   </table>
</div>

 
 

...and then have nada like this:

.nada table {
   border: none;
}

 
 

We can overpower an outer cascading effect with an inner cascading effect.