title: CSS class selector not working but tag and class selector does
body: <p>When I use a class selector to modify the width of an element it does not work. When I use a tag and class selector as in <code>table.change-name</code> it does work.</p>
  
  <p>HTML:</p>
  
  <pre><code>        &lt;!-- start settings --&gt;
          &lt;div class='settings'&gt;
              &lt;h4&gt;Account Settings&lt;/h4&gt;
              &lt;table class='options'&gt;
                  &lt;tr&gt;
                      &lt;td class='name username'&gt;Name&lt;/td&gt;
                      &lt;td class='value'&gt;Robert Rocha&lt;/td&gt;
                      &lt;td class='edit'&gt;&lt;a href='#'&gt;Edit&lt;/a&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class='name email'&gt;Email&lt;/td&gt;
                      &lt;td class='value'&gt;tom@gmail.com&lt;/td&gt;
                      &lt;td class='edit'&gt;&lt;a href='#'&gt;Edit&lt;/a&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class='name pword' colspan='2'&gt;Password&lt;/td&gt;
                      &lt;td class='edit'&gt;&lt;a href='#'&gt;Edit&lt;/a&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class='name remove-all' colspan='3'&gt;&lt;a href='#'&gt;Delete All Photos&lt;/a&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class='name remove-account' colspan='3'&gt;&lt;a href='#'&gt;Delete Account&lt;/a&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
  
  
  
  
              &lt;table class='change-name'&gt;
                  &lt;tr&gt;
                      &lt;td class='first'&gt;First&lt;/td&gt;
                      &lt;td&gt;&lt;input type='text' name='fname' class='fname'&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class='middle'&gt;Middle&lt;/td&gt;
                      &lt;td&gt;&lt;input type='text' name='mname' class='mname'&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class='last'&gt;Last&lt;/td&gt;
                      &lt;td&gt;&lt;input type='text' name='lname' class='lname'&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class='save'&gt;&lt;a href='#'&gt;Save&lt;/a&gt;&lt;/td&gt;
                      &lt;td class='cancel'&gt;&lt;a href='#'&gt;Cancel&lt;/a&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
  
          &lt;/div&gt;
          &lt;!-- end settings --&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/* Settings */
  
  .settings {
      width: 650px;
      margin: 0 auto;
      padding: 1em;
  }
  
  .settings h4 {
      padding: 1em 0;
      letter-spacing: 1px;
      border-bottom: 1px solid #cacece;
  }
  
  .settings table { 
      width: 100%;
      font-size: 0.9em;
      letter-spacing: 1px;
      font-weight: 200;
      table-layout: fixed;
  }
  
  .settings tr { border-bottom: 1px solid #cacece; }
  .settings td { padding: 0.5em 0; }
  .settings .edit { text-align: right; }
  .settings .name { font-weight: bold; }
  .settings .remove-all, .settings .remove-account { font-weight: 200; }
  
  /* Change Name Table */
  
  .change-name {
      background: #cacece;
      width: 300px;
  }
  
  .change-name tr { border: none; }
  </code></pre>
  
  <p>Result: <a href="https://jsfiddle.net/yy1mu2ze/" rel="nofollow">https://jsfiddle.net/yy1mu2ze/</a></p>
  
  <p>If I do the following:</p>
  
  <pre><code>table.change-name {
      background: #cacece;
      width: 300px;
  }
  </code></pre>
  
  <p>I get: <a href="https://jsfiddle.net/yy1mu2ze/1/" rel="nofollow">https://jsfiddle.net/yy1mu2ze/1/</a></p>
  
  <p>Why is this?</p>