Skip to content

Instantly share code, notes, and snippets.

@quelicm
Last active June 16, 2019 08:21
Show Gist options
  • Save quelicm/2569776 to your computer and use it in GitHub Desktop.
Save quelicm/2569776 to your computer and use it in GitHub Desktop.
play a bit with nth-child and nth-last-child #css #selectors #nth-child
/**
* play a bit with nth-child and nth-last-child
*/
div {
width: 40px;
height: 40px;
margin: 2px;
border: solid 2px #444
}
div:nth-child(n+4):nth-last-child(n+4) {
background: #ccc;
}
div:nth-child(2n+3):nth-last-child(2n+3) {
border-color: #f0a;
}
<!-- content to be placed inside <body>…</body> -->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment