Select a range of elements using the nth-child selector

Question

I have made a list of elements, that contains 81 divs in a row.

I want to select the elements 28 to 36 in it.

How can I do that using some CSS selector?

I guess we have to use the nth-child, but it requires a formula.

I can select the element 3, 12, 21, 30, 39, 48, 57, 66, 75 using something like

nth- child(9n + 3)

Answer 1

Use the :nth-child() pseudo class to start selecting at 28 and end selecting at 36.

You do this by chaining two selectors together.

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, 25px);
  grid-auto-rows: 25px;
  grid-gap: 5px;
}

div:nth-child(n+28):nth-child(-n+36){
   background-color: lightgreen;
}

/* non-essential decorative styles */
div {
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div>01</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div>28</div>
<div>29</div>
<div>30</div>
<div>31</div>
<div>32</div>
<div>33</div>
<div>34</div>
<div>35</div>
<div>36</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div>81</div>

Answer 2

You can accomplish this by chaining pseudo selectors.

div:nth-child(n+28):nth-child(-n+36){


}