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 withstyle = "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 <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>The :nth-child() selector is considered a pseudo selector that can select elements with a given formula. It selects based on its parent.
:nth-child(2) Select second occurrence:nth-child(even) or nth-child(2n) Select even occurrences:nth-child(2n+1) or nth-child(odd) Select odd occurrencesRead more css-tricks and MDN
Related selectors
:nth-child examples:
.nth2th:nth-child(2){
background-color: #806df9;
}
.odd p:nth-child(odd) {
background-color: #d387f6;
}
.nth3rd p:nth-child(3n) {
background-color: #f86b9d;
}
p{ margin: 0rem; padding: 0.2rem; }
h5{ margin: 2rem 0 0.2rem 0; }<h5>Select the second occurrence of nth2 class</h5>
<!-- The first .nth2th element will be selected because its the second element of its parent that has the class of .nth2th Its parent is the body element. -->
<p class="nth2th">paragraph 1 | nth-child(2) = selected</p>
<p class="nth2th">paragraph 2 | nth-child(3)</p>
<h5>Select all odd paragraph</h5>
<!-- Every odd paragraph will be selected because we are targeting all paragraphs inside the .odd container. The selector starts counting from its parent. -->
<div class="odd">
<p>paragraph 1 | nth-child(1) = odd</p> <!-- selected -->
<p>paragraph 2 | nth-child(2) = even</p>
<p>paragraph 3 | nth-child(3) = odd</p> <!-- selected -->
<p>paragraph 4 | nth-child(4) = even</p>
<p>paragraph 5 | nth-child(5) = odd</p> <!-- selected -->
<p>paragraph 6 | nth-child(6) = even</p>
</div>
<h5>Select every 3rd paragraph</h5>
<!-- Every third paragraph will be selected because we are targeting all paragraphs inside the .nth3rd container. -->
<div class="nth3rd">
<p>paragraph 1 | nth-child(1)</p>
<p>paragraph 2 | nth-child(2)</p>
<p>paragraph 3 | nth-child(3)</p> <!-- selected -->
<p>paragraph 4 | nth-child(4)</p>
<p>paragraph 5 | nth-child(5)</p>
<p>paragraph 6 | nth-child(6)</p> <!-- selected -->
<p>paragraph 7 | nth-child(7)</p>
</div>