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>
@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