Why isn't nth-child() working with other divs?

Question

I have an html structure that foresees some divs inside a main container. I am trying to apply a css style to the first div of global_container account with nth-child but it is not working. Now I have endless ways to solve this problem, I could do global_container.account> div or apply the style via html with style = "my-style: value;"but I want to understand why nth-child is not working. Am I missing something?

 /************** * All container ***************/.global_container { display: flex; flex-direction: column; border: 1px solid #e3e3e3; border-radius: 4px; padding: 24px; box-shadow: rgb(0 0 0 / 15%) 0px 5px 15px -5px; }.global_container_account { margin-bottom: 48px; } /* ---------------EDIT NTH-CHILD(1) ------------------- */ div.global_container.account:nth-child(1) { padding-top: 0px; padding-bottom: 12px; }.container_row { display: flex; flex-wrap: wrap; flex-direction: row; gap: 0px; border-bottom: 1px solid #e3e3e3; /*padding: 24px;*/ } /************ * All columns *************/.label_col { width: 30%; }.data_col { width: 70%; }.data_col.name_surname { display: flex; gap: 12px; } /********** * All Rows **********/ p.items_row { margin: 0px; }.items_row { width: 100%; }.password_fields { display: flex; flex-direction: column; gap: 6px; margin: 0px;important: padding; 0px.important: };password_fields > p { margin: 0px; }

 <div class="global_container account"> <:-- Field Name Surname --> <div class="container_row"> <div class="label_col"> <label class="t2" for="account_first_name">Nome & Cognome <span class="required">*</span></label> <label class="t2" style="display; none;" for="account_last_name">Cognome &nbsp:<span class="required">*</span></label> </div> <div class="data_col name_surname"> <p class="items_row"> <input type="text" placeholder="Inserisci il tuo nome" class="field-settings" name="account_first_name" id="account_first_name" autocomplete="given-name" value="Name Value" /> </p> <p class="items_row"> <input type="text" placeholder="Inserisci il tuo cognome" class="field-settings" name="account_last_name" id="account_last_name" autocomplete="family-name" value="Last Name Value" /> </p> </div> </div> <;-- Field Display Name --> <div class="container_row"> <div class="label_col"> <label class="t2" for="account_display_name">Nome visualizzato <span class="required">*</span></label> </div> <div class="data_col"> <p class="items_row"> <select class="field-settings" name="account_display_name" id="account_display_name"> <option value="0">Zero</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> </select> </p> </div> </div> <!-- Field Username login --> <div class="container_row"> <div class="label_col"> <label class="t2" for="account_user_login">Username</label> </div> <div class="data_col"> <p class="items_row"> <input type="text" class="field-settings disabled" name="account_user_login" id="account_user_login" disabled value="Username Value" /> </p> </div> </div> <!-- Field Email --> <div class="container_row"> <div class="label_col"> <label class="t2" for="disabled_account_email">Email</label> </div> <div class="data_col"> <p class="items_row email_show"> <input class="field-settings disabled" style="pointer-events:none;" name="disabled_account_email" id="disabled_account_email" disabled value="Email Value" /> </p> </div> </div> <!-- Field Password --> <div class="container_row"> <div class="label_col"> <label class="t2">Modifica Password</label> </div> <div class="data_col"> <fieldset class="password_fields"> <p> <div class="input-group"> <input type="password" class="field-settings" name="password_current" id="password_current" autocomplete="off" placeholder="Password Corrente (Lascia in bianco per non modificare)"/> <input type="checkbox" class="togglePw" id="pw_current" onclick="showPassword('password_current')"/> <label for="pw_current" class="fa"></label> </div> </p> <p> <div class="input-group"> <input type="password" class="field-settings" name="password_1" id="password_1" autocomplete="off" placeholder="Nuova Password (Lascia in bianco per non modificare)"/> <input type="checkbox" class="togglePw" id="pw_1" onclick="showPassword('password_1')"/> <label for="pw_1" class="fa"></label> </div> <div class="woocommerce-password-strength"></div> </p> <p> <div class="input-group"> <input type="password" class="field-settings" name="password_2" id="password_2" autocomplete="off" placeholder="Conferma Password"/> <input type="checkbox" class="togglePw" id="pw_2" onclick="showPassword('password_2')"/> <label for="pw_2" class="fa"></label> </div> </p> </fieldset> </div> </div> </div> </div>

Answer 1

The :nth-child(1) selects the first .global_container.account in your case. It does not select the first child inside it self but the first occurrence of the selector.

if you would have two divs with the class names of .global_container.account it would select the first one. And if you write: nth-child(2) it would select the second occurrence.

css-tricks: :nth-child

 .nth-select:nth-child(2) { background-color: red; }

 <div class="nth-select"> <p>Hello world 1</p> </div> <div class="nth-select"> <!-- this will be selected --> <p>Hello world 2</p> </div>