Skip to content

Instantly share code, notes, and snippets.

@francisrupert

francisrupert/Quantity Queries

Last active August 29, 2015 14:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save francisrupert/39b7b350ed9665d0c8fd to your computer and use it in GitHub Desktop.
Save francisrupert/39b7b350ed9665d0c8fd to your computer and use it in GitHub Desktop.
Download ZIP
Quantity Queries
Raw
Quantity Queries
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>page title</title>
<style>
.container {
margin: 40px;
}
.thing {
outline: 2px solid green;
padding: 20px;
margin: 10px;
}
.thing:nth-last-child(8):first-child,
.thing:nth-last-child(8):first-child ~ .thing {
outline: 1px solid blue;
}
.thing:nth-last-child(3):first-child,
.thing:nth-last-child(3):first-child ~ .thing {
outline: 1px solid red;
}
</style>
</head>
<body>
<h1>Quantity Selectors</h1>
<ul>
<li><a href="http://alistapart.com/article/quantity-queries-for-css" title="Quantity Queries for CSS · An A List Apart Article">http://alistapart.com/article/quantity-queries-for-css</a></li>
<li><a href="http://www.aaron-gustafson.com/notebook/quantity-queries-where-have-you-been-all-my-life/" title="Quantity Queries… Where Have You Been All My Life?, From the Notebook of Aaron Gustafson">http://www.aaron-gustafson.com/notebook/quantity-queries-where-have-you-been-all-my-life/</a></li>
<li><a href="https://github.com/danielguillan/quantity-queries">https://github.com/danielguillan/quantity-queries</a></li>
<li><a href="http://codepen.io/danielguillan/pen/GgBOxm" title="Quanity Queries Sass mixins demo">http://codepen.io/danielguillan/pen/GgBOxm</a></li>
</ul>
<div class="container">
<div class="thing">thing</div>
</div>
<div class="container">
<div class="thing">thing</div>
<div class="thing">thing</div>
</div>
<div class="container">
<div class="thing">thing</div>
<div class="thing">thing</div>
<div class="thing">thing</div>
<div class="thing">thing</div>
<div class="thing">thing</div>
<div class="thing">thing</div>
<div class="thing">thing</div>
<div class="thing">thing</div>
</div>
<div class="container">
<div class="thing">thing</div>
<div class="thing">thing</div>
<div class="thing">thing</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment