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>
Html javascript css
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?

Previous: If select chooses too many options, it will move down. How to solve the problem?

Next: React dynamic brush elements

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e43e84-43021.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e43e84-43021.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?