Solution 1 :

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) {

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.

Problem :

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" >
        <meta charset="utf-8" />



    .grid div:nth-child(even){ 
    .grid div:nth-child(3){ 

    <div class="grid">


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


Comment posted by Douglas156

*or if there are no other propreties(typed if by accident)

Comment posted by mr. pc_coder

You cant write more than one number in it. What is your choosing criteria for this

Comment posted by Douglas156

That’s what I’m talking about, thank you very much!!