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

  • Select an option

    Learn more about clone URLs
  • Save rondevera/167627 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
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>
@ldub

ldub commented Jul 11, 2013

Copy link
Copy Markdown

This is incredibly useful in implementing the "holy grail of css" - columns that arrange like newspaper columns. Simple example: jsfiddle. Thanks!

@mveenstra

mveenstra commented Mar 24, 2014

Copy link
Copy Markdown

Thank you for sharing!

@michalmrzyk

michalmrzyk commented May 27, 2014

Copy link
Copy Markdown

Thanks a lot also, just saved my time.

@y120

y120 commented Jun 24, 2014

Copy link
Copy Markdown

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

@selejanalex

selejanalex commented Sep 14, 2015

Copy link
Copy Markdown

Thank you sir!

@fer-ri

fer-ri commented Feb 17, 2016

Copy link
Copy Markdown

Maybe this would helpful

http://nthmaster.com/

@mcmullengreg

mcmullengreg commented Apr 13, 2016

Copy link
Copy Markdown

Thank you. Just, thank you. 🙇

@donnyv

donnyv commented Jan 25, 2017

Copy link
Copy Markdown

@ghprod nice!

@akshuvo

akshuvo commented Oct 27, 2017

Copy link
Copy Markdown

Great Thanks

ghost commented Jun 8, 2018

Copy link
Copy Markdown

Good good, very good

@TIOwilsu

TIOwilsu commented Apr 11, 2019

Copy link
Copy Markdown

Vlw bro

@Xxxdxs

Xxxdxs commented Jun 23, 2019

Copy link
Copy Markdown

very cool! it helps.thanks

@manzzy

manzzy commented Apr 27, 2020

Copy link
Copy Markdown

Awesome thanks for sharing

@oyishyi

oyishyi commented Dec 18, 2020

Copy link
Copy Markdown

thanks million!

@anisur2805

anisur2805 commented Aug 25, 2022

Copy link
Copy Markdown

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