Quantity Selector in CSS

Demonstration of querying and setting responsive styles to navigation with exactly 4 items and 5 or more items. The font-size is smaller when there are more items in the navigation. The grey border simulates the website shown in narrow width screen. Original idea from A List Apart—Quantity Queries for CSS.

See the Pen Demo of CSS Quantity selector by Thomas Seng Hin Mak (@makzan) on CodePen.

/* Quantity selector */
/* Exactly 4 items*/
nav li:nth-last-child(4):first-child,
nav li:nth-last-child(4):first-child ~ li {
  font-size: 90%;
}

/* More than 4 items (5+ items) */
nav li:nth-last-child(n+5):first-child,
nav li:nth-last-child(n+5):first-child ~ li {
  font-size: 70%;

  /* Smaller button */
  padding-left: 8px;
  padding-right: 8px;
}