title: CSS last three children only if condition
body: <p>I'm trying to learn how to select the <code>&lt;li&gt;</code> among the last three elements of a <code>&lt;ul&gt;</code> such that their (one-based) index is greater than the greatest multiple of 3 which is smaller than the number of list elements.</p>
  
  <p>So for example:</p>
  
  <ul>
  <li>if there are 9 <code>&lt;li&gt;</code> elements in <code>&lt;ul&gt;</code>, I want elements 1-6 to have font-weight:normal and elements 7,8 and 9 to have font-weight:bold.</li>
  <li>if there are 8 <code>&lt;li&gt;</code> elements in <code>&lt;ul&gt;</code>, I want elements 1-6 to have font-weight:normal and elements 7 and 8 to have font-weight:bold.</li>
  <li>if there are 7 <code>&lt;li&gt;</code> elements in <code>&lt;ul&gt;</code>, I want elements 1-6 to have font-weight:normal and element 7 to have font-weight:bold.</li>
  </ul>
  
  <p>I tried this CSS selector but it seems to make everything bold:</p>
  
  <pre class="lang-css prettyprint-override"><code>li:nth-last-child(1n+0),
  li:nth-last-child(2n+0),
  li:nth-last-child(3n+0) {font-weight:bold;}
  </code></pre>
  
  <p>How else do I do this?</p>