Select elements in a range
Use various selectors to select elements in different ranges
The way of kata
Kata is an exercise for muscle memory. It's not intended to fill your brain with information but train your fingers to react. The information is there to give you the why, but your fingers need to learn the how.
The material on this page is presented in a specific order — from least specific to highly technical. You will learn the most by jumping in as soon as you have some idea of what you should do. Once you're done, read the rest of the material and check your solution.
All katas are designed to be doable without using 3rd party libraries (and, in fact, the point is to also learn how to do what these libraries do).
To make the best of katas, observe the following rules.
- Don't rush.
- When stuck, take a break and do something unrelated.
- Do not copy/paste code. Always retype everything.
- Do not use AI tools to generate code.
- Try to do something that wasn't in the instructions, experiment.
- Repeat the kata from time to time, even if you think you've got it.
- You have mastered the kata once you are able to complete it without thinking too much.
Remember, the goal is not to get it done, but to get some practice.
Introduction
In this exercise you will practice using and combining various pseudo-classes in the CSS selectors to select elements within different ranges.
Skills you will acquire
- Using pseudo-classes
- Combining pseudo-classes
Objective
Change the background color of list items:
- only the first one
- only the last one
- only the 2nd
- only the 2nd from last
- all except the first one
- all except the last one
- all except 2nd
- all except 2nd from last
- first half
- second half
- every odd one
- every even one
- between 2nd and 6th item (i.e., only 3rd, 4th and 5th)
- group by 2 items and then only the odd groups
- group by 2 items and then only the even groups
- change 2 items then skip 1
- skip 2 then change 1 item
Check your solution
- Check that the background color of the items is changed as per the objectives
Tools
Run the following code in the developer tools to generate the list:
console.log(
new Array(10).fill()
.map(function (_, i) {
return `<li>item ${i + 1}</li>`
})
.join('\n')
)Keep in mind
Remember that you can combine multiple pseudo-classes on a single selector. Only
elements where all of them apply at the same time will be selected. For
instance, :hover:first-child select any element that is hovered and is the
first child of its parent element at the same time. If you want to apply any of
the pseudo-classes (as opposed to all and once), use the :where() or :is()
pseudo-classes.
Pseudo-classes can be negated using :not(). For example :not(:hover) will
select elements that are not hovered.
The :nth-child() takes a formula that will make the pseudo-class match
elements for which the formula returns their index. For instance, 2n+1
will match the 3rd element because for n=1, the result of evaluating the
formula is 2 × 1 + 1, which equals 3.
You can test which elements are going to match by writing a for loop in
JavaScript and plugging in the formula. For instance:
for (var n = 0; n < 10; n++) if (i > 1) console.log(2 * n + 1)You'll need to adjust the maximum number in n < 10 to cover the whole list
depending on the exact formula.