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>
Copy link

ghost commented Jun 8, 2018

Good good, very good

@TIOwilsu
Copy link

Vlw bro

@Xxxdxs
Copy link

Xxxdxs commented Jun 23, 2019

very cool! it helps.thanks

@manzzy
Copy link

manzzy commented Apr 27, 2020

Awesome thanks for sharing

@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