larlet-fr-david-cache/cache/6ab93fddd6436fc39962c832c70c7f07/index.md

title: Quantity Queries for CSS
url: http://alistapart.com/article/quantity-queries-for-css
hash_url: 6ab93fddd6436fc39962c832c70c7f07

<p>Don’t you just hate documentaries that don’t deliver? They have enticing names like <cite>In Search of the Giant Squid</cite>, and tease you with shots of murky underwater shapes and excited scientists pointing far out to sea. You settle down to watch, eyes narrowed with suspicion, thinking, “I better see some squid or I’m writing an angry letter to the network.”</p>

<p>Sure enough, 90 minutes of interviews with bored-looking fishermen later, the presenter is forced to conclude, “No… no, we didn’t find any big squids. But maybe one day [majestic orchestral flourish].” Great. You wanted <cite>Finding Nemo</cite> and got <cite>Not Finding Nemo</cite> instead.</p>

<p>I wouldn’t do that to you, friends. This is your guide to creating style breakpoints for quantities of HTML elements, much as you already do with <code>@media</code> queries for viewport dimensions. I’m not pointing at some blurry specification in the distance or a twinkle in an implementer’s eye. We’re going to do this <em>today</em>, with CSS that’s already available.</p>

<h2>Dynamic content</h2>

<p><a href="http://www.abookapart.com/products/responsive-web-design">Responsive web design</a> is primarily concerned with one variable: space. In testing responsive layouts, we take an amount of content and see which spaces it will successfully fit into. The content is deemed constant; the space, variable.</p>

<p>The <code>@media</code> query is the darling of responsive web design because it allows us to insert “breakpoints” wherever one layout strategy ceases to be viable and another should succeed it. However, it’s not just viewport dimensions, but the <em>quantity</em> of content that can put pressure on space. </p>

<p>Just as your end users are liable to operate devices with a multitude of different screen sizes, your content editors are liable to add and remove content. That’s what content management systems are for.  This makes Photoshop mockups of web pages doubly obsolete: they are snapshots of just one viewport, with content in just one state.</p>

<p>In this article, I will be outlining a technique to make CSS <em>quantity-aware</em> using specially formed selectors. I will be applying these selectors to one classic problem in particular: how to alter the display of items in a horizontal navigation menu when there are too many to suit the initial layout mode. That is, I will demonstrate how to switch from a <code>display: table-cell</code> to a <code>display: inline-block</code> layout when the number of items in the menu becomes “more than or equal to 6.”</p>

<p>I will not be relying on any JavaScript or template logic, and the menu’s list markup will remain devoid of class attribution. By using CSS only, the technique honors the <a href="http://www.w3.org/TR/html-design-principles/#separation-of-concerns">separation of concerns</a> principle, according to which content (HTML) and presentation (CSS) have clearly defined roles. Layout is CSS’s job and, where possible, CSS’s only.</p>

<figure>
<img src="http://alistapart.com/d/415/fig1_menu.png" alt="Comparing the initial menu bar layout for fewer than six items with the layout for six or more items"/>
</figure>

<p>The demonstration is <a href="http://codepen.io/heydon/pen/QwjGZp">available on CodePen</a> and will be referred to throughout the article.</p>

<p>To help me illustrate this qualification of quantity, I’ll be employing diagrams of squids in the article to represent HTML elements. Green squids with ticks represent elements that match the CSS selector in question, red squids with crosses are unselected elements, and grayed-out squids denote elements that don’t exist.</p>

<figure>
<img src="http://alistapart.com/d/415/fig2_squid.png" alt="A key for the three squid symbols to be used in following diagrams. A green squid (for selected elements), a red squid (for unselected elements) and a grey squid for elements that don't exist"/>
</figure>

<h2>Counting</h2>

<p>The key to determining the quantity of elements in a given context is to count them. CSS doesn’t provide an explicit “counting API,” but we can solve the same problem with an inventive combination of selectors.</p>

<h3>Counting to one</h3>

<p>The <code>:only-child</code> selector provides a means to style elements if they appear in isolation. Essentially, it lets us “style all the child elements of a particular element, if counting those children returns 1 as the total.” Aside from its stablemate <code>:only-of-type</code>, it is the only simple selector that can be described as quantity-based.</p>

<p>In the following example, I use <code>:only-of-type</code> to add a special style to any buttons that are the <em>only</em> elements of their element type among sibling elements. I give these lone buttons an increased <code>font-size</code> because singularity suggests importance.</p>

<pre><code class="language-css">
button { 
  font-size: 1.25em;
}

button:only-of-type {
  font-size: 2em;
}

</code></pre>

<p>Here’s the crucial part. If I were to start out with one button, replete with a larger font size, and add buttons before or after it, <em>each</em> button would then adopt a smaller font size. The style of all the elements in the set is dependent on a quantity threshold of two: if there are “fewer than two” elements, the larger font size is honored. Take a look at that code again with the “fewer than two” notion in mind:</p>

<pre><code class="language-css">
button {
  font-size: 1.25em;
}

button:only-of-type {
  font-size: 2em;
}

</code></pre>

<figure>
<img src="http://alistapart.com/d/415/fig3_fewerthan.png" alt="The fewer than two logic means one selected element (green squid) becomes two unselected elements (red squids) when an element is added"/>
</figure>

<p>If it feels more natural, you can turn the CSS logic on its head using <a href="http://css-tricks.com/almanac/selectors/n/not/">negation</a> and make the condition “more than one.”</p>

<pre><code class="language-css">
/* "More than one" results in a smaller font size */
button {
  font-size: 2em;
}

button:not(:only-of-type) {
  font-size: 1.25em;
}

</code></pre>

<figure>
<img src="http://alistapart.com/d/415/fig4_morethan.png" alt="The more than one logic means one unselected element (red squid) becomes two selected elements (green squids) when an element is added"/>
</figure>

<h3>Quantity <i>n</i></h3>

<p>Styling elements based on the “more than one” and “fewer than two” thresholds is a neat trick, but a flexible “quantity query” interface would accept any quantity. That is, I should be able to style “more than or equal to <i>n</i>” for any value of <i>n</i>. Then I can style “more than or equal to 6” in our navigation menu.</p>

<p>With a view to achieving this final goal, what if I were able to style discrete quantities like “exactly 6 in total” or “exactly 745”? How would I go about that? I would need to use a selector that allowed me to traverse sets of elements of any quantity numerically.</p>

<p>Fortunately, the <a href="http://css-tricks.com/almanac/selectors/n/nth-last-child/"><code>:nth-last-child(n)</code> selector</a> accepts the number “<i>n</i>”, enabling me to count sets of elements from the <em>end</em> of the set toward the beginning. For example, <code>:nth-last-child(6)</code> matches the element that is sixth from last among sibling elements.</p>

<p>Things get interesting when concatenating <code>:nth-last-child(6)</code> with <code>:first-child</code>, introducing a second condition. In this case, I am looking for any element that is <em>both</em> the sixth element from the end <em>and</em> the first element.</p>

<pre><code class="language-css">
li:nth-last-child(6):first-child {
  /* green squid styling */
}

</code></pre>

<p>If this element exists, the set of elements <em>must be exactly six</em> in quantity. Somewhat radically, I have written CSS that tells me how many elements I am looking at.</p>

<figure>
<img src="http://alistapart.com/d/415/fig5_firstchild.png" alt="Of six squids, the first is green and the rest red. The first is subject to the nth-last-child(6) selector as well as the first-child selector"/>
</figure>

<p>All that remains is to leverage this key element to style the remaining elements in the set. For this, I employ the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors">general sibling combinator</a>.</p>

<figure>
<img src="http://alistapart.com/d/415/fig6_firstchild_li.png" alt="Six green squids because the first green squid is combined with the general sibling combinator to make all the red squids that follow green"/>
</figure>

<p>If you’re not familiar with the general sibling combinator, the <code>~ li</code> in <code>li:nth-last-child(6):first-child ~ li</code> means “any <code>li</code> elements that occur after <code>li:nth-last-child(6):first-child</code>.” In the following example, the elements each adopt a green font color if there are <em>precisely</em> six of them in total.</p>

<pre><code class="language-css">
li:nth-last-child(6):first-child, 
li:nth-last-child(6):first-child ~ li {
  color: green;
}

</code></pre>

<h2>More than or equal to 6</h2>

<p>Targeting a discrete quantity—whether it’s 6, 19, or 653—is not especially useful because it pertains to such a specific situation. Using discrete widths rather than <code>min-width</code> or <code>max-width</code> in our <code>@media</code> queries would be similarly unhelpful:</p>

<pre><code class="language-css">
@media screen and (width: 500px) {
  /* styles for exactly 500px wide viewports */
}

</code></pre>

<p>In <a href="http://alistapart.com/d/415/content-aware-navigation/">the navigation menu</a>, I really want to switch layouts at a <em>threshold</em>: a quantity watershed. I want to switch at six <em>or more</em> items—not <em>exactly</em> six items. When I reach that threshold, I  would like to change from a distributed table layout to a simpler, wrappable <code>inline-block</code> configuration. Importantly, I would like to <em>retain</em> that switched configuration as the number of items further increases. </p>

<p>The question is, how does one begin to construct such a selector? It’s a question of <em>offsets</em>.</p>

<h3>The <i>n</i>+6 argument</h3>

<p>Another arithmetical argument adoptable by the <code>:nth-child()</code> selector takes the form “<i>n</i> + [integer]”. For example, <code>:nth-child(n+6)</code> styles all the elements in a set starting from the sixth.</p>

<figure>
<img src="http://alistapart.com/d/415/fig7_adinfinitum.png" alt="A set of red squids that become green at the sixth squid for the remainder of the set (which can be of any size), counting upwards."/>
</figure>

<p>Though this has conceivable applications all its own, it’s not a “quantity-aware” selection method as such: we’re not styling anything because there are six elements or more in total; we’re just styling the ones that happen to enumerate higher than five.</p>

<p>To begin solving the problem properly, what we really need is to create a set of elements that excludes the last five items. Using the opposite of <code>:nth-child(n+6)</code>—<code>:nth-last-child(n+6)</code>—I can apply the switched layout properties to all “last elements” <em>starting from the sixth</em>, counting back toward the beginning of the set.</p>

<pre><code class="language-css">
li:nth-last-child(n+6) {
  /* properties here */
}

</code></pre>

<p>This omits the last five items from a set of any length, meaning that when you reduce the length of the set below six, you cease to see any selected items. It’s a sort of “sliding doors” effect.</p>

<figure>
<img src="http://alistapart.com/d/415/fig8_slidingdoors.png" alt="A set of green squids (to the left) and red squids (to the right) become a set of just red squids when the set becomes fewer than six in number"/>
</figure>

<p>If, indeed, the set is greater than or equal to six in total, then all that remains is to style those last five items as well. This is easy: where there are more than six items, one or more items that “return true” (in JavaScript-speak) for the <code>nth-last-child(n+6)</code> condition must exist. Any and all of these extant elements can be combined with “<code>~</code>” to affect all items (including the last five) that follow it.</p>

<figure>
<img src="http://alistapart.com/d/415/fig9_breakpoint.png" alt="When a set of red squids has squids added to it, the squids to the right of the set become green and can be used to make the rest of the red squids green too (with the general sibling combinator)"/>
</figure>

<p>The surprisingly terse solution to our problem is this:</p>

<pre><code class="language-css">
li:nth-last-child(n+6),
li:nth-last-child(n+6) ~ li {
  /* properties here */
}

</code></pre>

<p>Naturally, 6 can be replaced with any positive integer, even 653,279.</p>

<h2>Fewer than or equal to <i>n</i></h2>

<p>As in the earlier <code>:only-of-type</code> example, you can turn the logic on its head, switching from “more than or equal to <i>n</i>” to “fewer than or equal to <i>n</i>.” Which brand of logic you use depends on which state you consider the more natural default state. “Fewer than or equal to <i>n</i>” is possible by negating <i>n</i> and reinstating the <code>:first-child</code> condition.</p>

<pre><code class="language-css">
li:nth-last-child(-n+6):first-child,
li:nth-last-child(-n+6):first-child ~ li {
  /* properties here */
}

</code></pre>

<p>In effect, the use of “-” switches the direction of the selection: instead of pointing toward the start from the sixth, it points toward the end from the sixth. In each case, the selector is inclusive of the sixth item.</p>

<h3><code>nth-child</code> versus <code>nth-of-type</code></h3>

<p>Note that I am using <code>:nth-child()</code> and <code>:nth-last-child()</code> in the preceding examples, not <code>:nth-of-type()</code> and <code>:nth-last-of-type()</code>. Because I am dealing in <code>&lt;li&gt;</code> elements and <code>&lt;li&gt;</code>s are the only legitimate children of <code>&lt;ul&gt;</code>s, <code>:last-child()</code> and <code>:last-of-type()</code> would both work here.</p>

<p>The <code>:nth-child()</code> and <code>:nth-of-type()</code> families of selectors have different advantages depending on what you are trying to achieve. Because <code>:nth-child()</code> is element agnostic, you could apply the described technique across different element type siblings:</p>

<pre><code class="language-markup">
&lt;div class="container"&gt;

  &lt;p&gt;...&lt;/p&gt;

  &lt;p&gt;...&lt;/p&gt;

  &lt;blockquote&gt;...&lt;/blockquote&gt;

  &lt;figure&gt;...&lt;/figure&gt;

  &lt;p&gt;...&lt;/p&gt;

  &lt;p&gt;...&lt;/p&gt;

&lt;/div&gt;

</code></pre>

<pre><code class="language-css">
.container &gt; :nth-last-child(n+3),
.container &gt; :nth-last-child(n+3) ~ * {
  /* properties here */
}

</code></pre>

<p>(Note how I am using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors">the universal selector</a> to maintain element agnosticism here. <code>:last-child(n+3) ~ *</code> means “any element of any type following <code>:last-child(n+3)</code>.”)</p>

<p>The advantage of <code>:nth-last-of-type()</code>, on the other hand, is that you are able to target groups of like elements where other siblings of different types are present. For example, you could target the quantity of paragraphs in the following snippet, despite them being bookended by a <code>&lt;div&gt;</code> and a <code>&lt;blockquote&gt;</code>.</p>

<pre><code class="language-markup">
&lt;div class="container"&gt;

  &lt;div&gt;...&lt;/div&gt;

  &lt;p&gt;...&lt;/p&gt;

  &lt;p&gt;...&lt;/p&gt;

  &lt;p&gt;...&lt;/p&gt;

  &lt;p&gt;...&lt;/p&gt;

  &lt;p&gt;...&lt;/p&gt;

  &lt;p&gt;...&lt;/p&gt;

  &lt;p&gt;...&lt;/p&gt;

  &lt;blockquote&gt;...&lt;/blockquote&gt;

&lt;/div&gt;

</code></pre>

<pre><code class="language-css">
p:nth-last-of-type(n+6),
p:nth-last-of-type(n+6) ~ p {
  /* properties here */
}

</code></pre>

<h2>Selector support</h2>

<p>All of the CSS2.1 and CSS3 selectors used in this article are supported in <a href="http://caniuse.com/#feat=css-sel3">Internet Explorer 9 and above</a>, including all reasonably recent mobile/handheld stock browsers. </p>

<p>Internet Explorer 8 support is good for most selector types, but technically partial, so you might want to consider a JavaScript polyfill. Alternately, you could pair the selectors for the “safer” of the layout strategies with <a href="http://nicolasgallagher.com/better-conditional-classnames-for-hack-free-css/">IE9-specific classes</a>. In the case of the navigation menu, the safer option is the one catering to more items, using <code>inline-block</code>. The declaration block would look something like this:</p>

<pre><code class="language-css">
nav li:nth-last-child(n+6),
nav li:nth-last-child(n+6) ~ li, 

.lt-ie9 nav li {
  display: inline-block;
  /* etc */
}

</code></pre>

<h2>In the real world</h2>

<p>Suppose our <a href="http://alistapart.com/d/415/content-aware-navigation/">navigation menu</a> belongs to a content-managed site. Depending on who is administering the theme, it will be populated with a greater or fewer number of options. Some authors will keep things simple with just “Home” and “About” links provided, while others will cram their menu full of custom page and category options. </p>

<p>By providing alternative layouts depending on the number of menu items present, we increase the elegance with which we tolerate different implementations of the theme: we address variable content as we might variable screen dimensions.</p>

<figure>
<img src="http://alistapart.com/d/415/fig1_menu.png" alt="Comparing the initial menu bar layout for fewer than six items with the layout for six or more items"/>
</figure>

<p>So, there you have it: squid ahoy! You can now add quantity as a styling condition to your repertoire.</p>

<h2>Content-independent design</h2>

<p>Responsive web design solves an important problem: it makes the <em>same</em> content comfortably digestible between <em>different</em> devices. For folks to receive different content just because they have different devices would be unacceptable. Similarly, it’s unacceptable for a design to dictate the nature of the content. We wouldn’t tell an editor, “Lose that, will you? It makes the design look wrong.”</p>

<p>But what form the content takes, and how much of it there is at any one time, is frequently indeterminate—another unknown. And we can’t always rely on text wrapping and truncation scripts. To get a real handle on content independence, we need to develop new tools and techniques. Quantity queries are just one idea.</p>

<p>Web design is about mutability, difference, uncertainty. It’s about <em>not knowing</em>. Uniquely, it is a mode of visual design not about manifesting a form, but about anticipating the different forms something <em>might</em> take. To some it is unbearably perplexing, but to you and me it is a challenge to relish. Like the elusive giant squid, it is a seriously slippery customer.</p>