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
  • 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>
@michalmrzyk
Copy link

Thanks a lot also, just saved my time.

@y120
Copy link

y120 commented Jun 24, 2014

A feasible alternative is :nth-child(n + 3):not(:nth-child(n + 8)).

@selejanalex
Copy link

Thank you sir!

@fer-ri
Copy link

fer-ri commented Feb 17, 2016

Maybe this would helpful

http://nthmaster.com/

@mcmullengreg
Copy link

Thank you. Just, thank you. 🙇

@donnyv
Copy link

donnyv commented Jan 25, 2017

@ghprod nice!

@akshuvo
Copy link

akshuvo commented Oct 27, 2017

Great Thanks

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