title: How to use nth-of-type with :before and targeting all but the last element, or the last element targeted differently
body: <p>I'm using the css tricks responsive table (<a href="https://css-tricks.com/responsive-data-tables/" rel="nofollow noreferrer">https://css-tricks.com/responsive-data-tables/</a>), but wondering how to get rid of the mobile-view's last td "before" content.</p>
  
  <p>Basically for this code, which writes the text in the td's for the responsive view:</p>
  
  <pre><code>table td:nth-of-type(1)::before { content: "Expenses"; }
  table td:nth-of-type(2)::before { content: "2015"; }
  table td:nth-of-type(3)::before { content: "2016"; }
  </code></pre>
  
  <p>For the first line (which writes "Expenses" in the cell), how do I have that happen for all but the LAST cell? What's happening is my last  is the "totals" row for this table, so I don't need the "td content before" written to the last td (if that makes any sense... I'm also wondering if my table format needs tweaking, or I just have to deal with the "totals" line differently all together with these responsive tables -- there's no clear cut example on CSS tricks for a responsive table with a "totals" row).</p>
  
  <p>I've been trying last-child, nth-last-of-type, etc. but having no luck. Here's an example of something I've tried:</p>
  
  <pre><code> table td:nth-last-of-type(1)::before { content: " "; }
  </code></pre>
  
  <p>but, it does not work. I've read you can combine pseudo elements and psuedo classes... I've tried combinations with :not also, display: none, and have tried to change the HTML, but no luck. Maybe even write a display none with jQuery to the last td and add a class to then display none? I'm running in circles with this.</p>
  
  <p>Can anyone help me?</p>
  
  <p>thanks!</p>
  
  <p>UPDATE: Here is a JSFiddle showing this: <a href="https://jsfiddle.net/gamehendgeVA/vh7bjscy/" rel="nofollow noreferrer">https://jsfiddle.net/gamehendgeVA/vh7bjscy/</a></p>