You can select multiple nth-child and separate them with a comma ,.
.grid div:nth-child(2),
.grid div:nth-child(3),
.grid div:nth-child(5) {
background-color:green;
}
Note: You can also use fomulas in your nth-child if you like, e.g. nth-child(2n), nth-child(4n+5), etc.
You can read more about the CSS nth-child property here.
I’ve been trying to make a layout on CSS getting help from a tutorial on CSS grid, the person on the video used the “even” and “odd” proprieties to select the numbers he was targeting to work on, but I wanted to choose the numbers myself so I could do things in a more personalized way(it only works with one number alone), but when I search here and other places all I get are things about columns, so I’m a little confused because I don’t know if I am not searching with the proper words and terms of if there are no other proprieties to use and I end up thinking I’m not finding the answer when that may be the only answer, here’s the code I saw on the tutorial which I wanted to modify:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<style>
.grid div:nth-child(even){
background-color:red;
}
.grid div:nth-child(3){
background-color:green;
}
</style>
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
.grid div:nth-child(3){ <—-This is the part I wanted to modify when I write the number alone(3), it selects the line I want correctly, but it doesn’t work with more than 1 number(2,3,5), here lies my issue. I tried using , ; / but none of these works, it is probably something silly.
*or if there are no other propreties(typed if by accident)
You cant write more than one number in it. What is your choosing criteria for this
That’s what I’m talking about, thank you very much!!