On the question of css selection, how to write css without js can make two div with similar names set different backgrounds

I want to set the courseBefore under the first class name agile_gallery_grid1 to a background

I want to set the courseBefore under the second class name agile_gallery_grid1 to another background

use

.agile_gallery_grid1.courseBefore:nth-child(1) 

.agile_gallery_grid1.courseBefore:nth-child(2) 

to set but can"t set the background at all. What"s wrong with the selector I wrote and how to write it without js to achieve the desired result

the code is as follows


<div class="w3ls_gallery_grids">
                <div class="col-md-4 w3_agile_gallery_grid">
                    <div class="agile_gallery_grid">
                        <a title="" href="https://www.univer.top/" target="_blank">
                            <div class="agile_gallery_grid1">
                                <div class="courseLogo">
                                    <div class="courseBefore"><div class="bmbox"></div></div>
                                    <div class="courseAfter">
                                        
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    
                </div>
                <div class="col-md-4 w3_agile_gallery_grid">
                    <div class="agile_gallery_grid">
                    
                        <div class="agile_gallery_grid1">
                        
                            <div class="courseLogo">
                                <div class="courseBefore"><div class="bmbox"></div></div>
                                <div class="courseAfter"></div>
                            </div>
                            
                        </div>
                        
                    </div>
                </div
</div>
Sep.30,2021

if you write like this, agile_gallery_grid1 and courseBefore are of the same level, so it should be:

.w3_agile_gallery_grid:nth-child(1) .courseBefore{}
.w3_agile_gallery_grid:nth-child(2) .courseBefore{}

< H2 > solution < / H2 >

it should be possible to do this:

  

you can find a child. Can you write an ID for each of them directly?

Menu