How to Select a Range of Elements in Repeated Pattern

How to select a range of elements in repeated pattern

This is a commonly-asked question, but I wanted to point out that the reason :nth-child(n+4):nth-child(-n+6) only matches one specific range of elements is that it only provides a single start point (n+4) and a single end point (-n+6). The only elements that can be greater than or equal to 4 and less than or equal to 6 are 4, 5 and 6, so it's impossible to match elements outside of this range using the same selector. Adding more :nth-child() pseudos will only narrow down the matches.

The solution is to think of this in terms of columns, assuming there will always be exactly 3 columns (elements) per row. You have three columns, so you will need three separate :nth-child() pseudos. Elements 4 and 10 from the first column are 6 elements apart, so the argument to all of the :nth-child() pseudos needs to start with 6n.

The +b portion in the An+B expression can either be +4, +5 and +6, or 0, -1 and -2 — they will both match the same set of elements:

li:nth-child(6n+4), li:nth-child(6n+5), li:nth-child(6n+6)
li:nth-child(6n), li:nth-child(6n-1), li:nth-child(6n-2)

You cannot do this with a single :nth-child() pseudo-class, or a single compound selector consisting of any combination of :nth-child() pseudos, because the An+B notation simply doesn't allow such expressions to be constructed that match elements in ranges as described.

Can I select first 5 elements every 10 elements?

You have correct formula, your css only missing 2nd, 3rd, 4th and 5th selectors, here is working example:

ul li:nth-child(10n+1),
ul li:nth-child(10n+2),
ul li:nth-child(10n+3),
ul li:nth-child(10n+4),
ul li:nth-child(10n+5) {color:red;}

<ul>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      
    </ul>

CSS Recurring nth-child Pattern

You can use the CSS selector for nth-child to get this.

As your cycle occupies 9 spaces (1-3, 4-6, 7-9), this is 9n and then add the offset of the item in the list. For example:

ul > li:nth-child(9n + 1),
ul > li:nth-child(9n + 2),
ul > li:nth-child(9n + 3) {
  background-color: green;
}

Here's a working snippet showing it:

ul > li:nth-child(9n + 1),ul > li:nth-child(9n + 2),ul > li:nth-child(9n + 3) {  background-color: green;}
ul > li:nth-child(9n + 4),ul > li:nth-child(9n + 5),ul > li:nth-child(9n + 6) {  background-color: red;}
ul > li:nth-child(9n + 7),ul > li:nth-child(9n + 8),ul > li:nth-child(9n + 9) {  background-color: blue;}

<ul>  <li>One</li>  <li>Two</li>  <li>Three</li>  <li>Four</li>  <li>Five</li>  <li>Six</li>  <li>Seven</li>  <li>Eight</li>  <li>Nine</li>  <li>Ten</li>  <li>Eleven</li>  <li>Twelve</li>  <li>Thirteen</li>  <li>Fourteen</li>  <li>Fifteen</li>  <li>Sixteen</li>  <li>Seventeen</li>  <li>Eighteen</li>  <li>Nineteen</li>  <li>Twenty</li></ul>

Repeat nth-child values

You can use .box:nth-child(4n+x) as your selector. This answer explains it well.

.container {  display: grid;  grid-template-columns: 100px 100px 100px 100px;}
.box {  border: 1px solid black;  height: 100px;}
.box:nth-child(4n+1) {  background: red;}
.box:nth-child(4n+2) {  background: blue;}
.box:nth-child(4n+3) {  background: yellow;}
.box:nth-child(4n+4) {  background: pink;}

<div class="container">  <div class="box"></div>  <div class="box"></div>  <div class="box"></div>  <div class="box"></div>    <div class="box"></div>  <div class="box"></div>  <div class="box"></div>  <div class="box"></div>    <div class="box"></div>  <div class="box"></div>  <div class="box"></div>  <div class="box"></div></div>

How to apply css to 3 items after every 3 items?

is this you are looking for?

li:nth-child(3n-1),li:nth-child(3n-2),li:nth-child(3n-3){  background: red;}li:nth-child(6n),li:nth-child(6n-1),li:nth-child(6n-2){  background: green;}

<ul>  <li>1</li>  <li>2</li>  <li>3</li>  <li>4</li>  <li>5</li>  <li>6</li>  <li>7</li>  <li>8</li>  <li>9</li>  <li>10</li>  <li>11</li>  <li>12</li>  <li>1</li>  <li>2</li>  <li>3</li>  <li>4</li>  <li>5</li>  <li>6</li>  <li>7</li>  <li>8</li>  <li>9</li>  <li>10</li>  <li>11</li>  <li>12</li></ul>

How do I select every other even child and adjacent child?

You could solve this with :nth-child using two formulas, one for the even numbers and one for the even ones. This is a working example of my suggestion:

<style>
    li:nth-child(4n - 2), li:nth-child(4n - 1) { color: red; }
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

The 4n part provides the "every other even/odd" part you're looking for: it will select one every 4 items. The -1 and -2 offset this interval to match the numbers you want. You could get the inverse behaviour (select 1, 4, 5, 8, 9, etc) when using offsets +1 and 0

Apply CSS for n-items

As suggested by @Chris G as well, you can use a :nth-child(4n + k) selector:

div:nth-child(4n + 1), div:nth-child(4n + 2)  {
  color: green;
}

div:nth-child(4n + 3), div:nth-child(4n) {
  color: red;
}

<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
<div>H</div>
<div>I</div>
<div>J</div>

How to Select a Range of Elements in Repeated Pattern