Skip to content

Instantly share code, notes, and snippets.

@rondevera

rondevera/css-to-select-range-of-children.html

Last active February 8, 2023 11:29
Show Gist options
  • Star 61 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save rondevera/167627 to your computer and use it in GitHub Desktop.
Save rondevera/167627 to your computer and use it in GitHub Desktop.
Download ZIP
CSS selector for a range of children
Raw
css-to-select-range-of-children.html
<!DOCTYPE html>
<html>
<head>
<style>
/* How to select a range of children
* (Here, 3rd-7th children, inclusive):
*/
ul li:nth-child(n+3):nth-child(-n+7) {
outline: 1px solid #0f0;
}
</style>
</head>
<body>
<ul>
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
<li>Child 4</li>
<li>Child 5</li>
<li>Child 6</li>
<li>Child 7</li>
<li>Child 8</li>
<li>Child 9</li>
<li>Child 10</li>
</ul>
</body>
</html>
@oyishyi
Copy link

oyishyi commented Dec 18, 2020

thanks million!

@anisur2805
Copy link

This is an awesome trick for custom style, ha ha ha

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment