Death to the Bottom Line / @catharsis

dabblet.css

/**
 * Death to the Bottom Line / @catharsis
 */
body {
  font-family: sans-serif;
  line-height: 1.5;
  margin: 2em 4em;
  width: 500px;
}
code {
  white-space: nowrap;
}
h1 {
  margin-bottom: 0;
}
li {
  margin-bottom: .5em;
}
dt {
  color: #fff;
  display:inline-block;
  font-family: sans-serif;
  font-weight: bold;
  height: 22px;
  padding: 0;
  text-align: center;
  width: 22px;
}
dt:first-of-type {
  background: blue;
}
dt:nth-of-type(2) {
  background: green;
}
dt:nth-of-type(3) {
  background: orange;
}
dd {
  position: relative;
  top: -1.5em;
}

.demo {
  border: 1px solid #ccc;
  border-radius: 5px;
  letter-spacing: -0.3em;
  list-style: none;
  margin: 2em 0 0;
  padding: 0;
  width: 302px;
}
.demo li { 
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  display: inline-block;
  height: 20px;
  letter-spacing: normal;
  list-style: none;
  margin: 0;
  padding: 24px 0 20px;
  position: relative;
  text-align: center;
  width: 100px;
}
.demo li:nth-child(3n) {
  border-right: none;
}
.demo li:last-child,
.demo li:nth-last-child(2):not(:nth-child(3n)),
.demo li:nth-last-child(3):not(:nth-child(3n)):not(:nth-child(3n-1)) {
  border-bottom: none;
}

/* debug */
.demo li:last-child:before,
.demo li:nth-last-child(2):not(:nth-child(3n)):before,
.demo li:nth-last-child(3):not(:nth-child(3n)):not(:nth-child(3n-1)):before {
  color: #fff;
  font-family: sans-serif;
  font-weight: bold;
  height: 22px;
  padding: 0;
  position: absolute; left: 0; top: 0;
  width: 22px;
}

.demo li:last-child:before {
  background: blue;
  content: "1";
 }

.demo li:nth-last-child(2):not(:nth-child(3n)):before {
  background: green;
  content: "2";
}
.demo li:nth-last-child(3):not(:nth-child(3n)):not(:nth-child(3n-1)):before {
  background: orange;
  content: "3";
}

dabblet.html

<h1>Death to the Bottom Line</h1>
<p>Some creative <em>nth-child()</em>-ing. In a table-esque inline-block list, it will remove the extra line that results from needing both container and list item borders.</p>
<p>Why might this be useful?</p>
<ul>
  <li><strong>Rounded corners on container</strong>: setting a negative margin on list items in the top/bottom row leave the corners misaligned.</li> 
  <li><strong>Pixel perfection</strong>: using a negative margin on either the top/bottom borders of the list items sometimes shaves off a pixel, resulting in slight vertical-misalignments.</li>
</ul>

<p>For this example, I'll be using a 3-column layout using only inline-block list items. The three selectors used in combination to select the bottom row in all permutations are:</p>

<dl>
  <dt>1</dt>
  <dd><code>li:last-child</code></dd>
  <dt>2</dt>
  <dd><code>li:nth-last-child(2):not(:nth-child(3n))</code></dd>
  <dt>3</dt>
  <dd><code>li:nth-last-child(3):not(:nth-child(3n)):not(:nth-child(3n-1))</code></dd>
</dl>

<p>Here's a demo to illustrate how this works. The boxes in the corners are numbered based on which selector applies to them.</p>

<ul class="demo">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

<ul class="demo">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

<ul class="demo">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

<br />

<p>There's a pattern/strategy here. Let <var>x</var> be the total number of columns. All we have to do is figure out how to select each list item when it's on the bottom row, and deselect it when it's not. Let's try this with four columns:</p>

<ol>
  <li>Select the last item, regardless of its position.<p><code>li:last-child</code></p></li>
  <li>Select the next to last child, except when it's in the rightmost column (where it's not touching the bottom).<p><code>li:nth-last-child(2):not(:nth-child(<b>x</b>n))</code></p></li>
  <li>Select the third to last child, except when it's in the two rightmost columns.<p><code>li:nth-last-child(3):not(:nth-child(<b>x</b>n)):not(:nth-child(<b>x</b>n-1))</code></p></li>
  <li>Select the fourth to last child, except when it's in any column but the leftmost one.<p><code>li:nth-last-child(4):not(:nth-child(<b>x</b>n)):not(:nth-child(<b>x</b>n-1)):not(:nth-child(<b>x</b>n-2))</code></p></li>
</ol>

<p>For additional columns, add another selector incrementing the <code>nth-last-child()</code> parameter, and add another <code>:not(:nth-child(<b>x</b>n-<var>?</var>))</code>, incrementing the <var>?</var>.</p>

<p>Questions? <a href="http://twitter.com/catharsis">Find me on Twitter</a> and ask away! Or just view some <a href="http://result.dabblet.com/gist/3166912/0a771c9b57e7a40d3b3bb4f7b98019a66026b919">working code on Dabblet</a>.</p>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}

Rendered (on dabblet): http://dabblet.com/gist/3166912

Rendered (on dabblet): http://dabblet.com/gist/3166912