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

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 >
    <!-- Field Name Surname -->
    <div >
      <div >
        <label  for="account_first_name">Nome & Cognome <span >*</span></label> 
        <label  style="display: none;" for="account_last_name">Cognome &nbsp;<span >*</span></label>
      </div>

      <div >
        <p >
          <input type="text" placeholder="Inserisci il tuo nome"  name="account_first_name" id="account_first_name" autocomplete="given-name" value="Name Value" /> 
        </p>
        <p >
          <input type="text" placeholder="Inserisci il tuo cognome"  name="account_last_name" id="account_last_name" autocomplete="family-name" value="Last Name Value" />
        </p> 
      </div>
    </div>
  
    <!-- Field Display Name -->
    <div >
      <div >
        <label  for="account_display_name">Nome visualizzato <span >*</span></label>
      </div>
      
      <div >
        <p >
          <select  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 >
      <div >
        <label  for="account_user_login">Username</label>
      </div>
      
      <div >
        <p >
          <input type="text"  name="account_user_login" id="account_user_login" disabled value="Username Value" />
        </p>
      </div>
    </div>

    <!-- Field Email -->
    <div >
      <div >
        <label  for="disabled_account_email">Email</label>
      </div>
      
      <div >
        <p >
          <input  style="pointer-events:none;" name="disabled_account_email" id="disabled_account_email" disabled value="Email Value" />
        </p>
      </div>
    </div>

    <!-- Field Password -->
    <div >
        <div >
          <label >Modifica Password</label>
        </div>
        
        <div >
          <fieldset >  
            <p>
              <div >
                <input type="password"  name="password_current" id="password_current" autocomplete="off" placeholder="Password Corrente (Lascia in bianco per non modificare)"/>
                <input type="checkbox"  id="pw_current" onclick="showPassword('password_current')"/>
                <label for="pw_current" ></label>
              </div>
            </p>

            <p>
              <div >
                <input type="password"  name="password_1" id="password_1" autocomplete="off" placeholder="Nuova Password (Lascia in bianco per non modificare)"/>
                <input type="checkbox"  id="pw_1" onclick="showPassword('password_1')"/>
                <label for="pw_1" ></label>
              </div>
              <div ></div>
            </p>

            <p>
              <div >
                <input type="password"  name="password_2" id="password_2" autocomplete="off" placeholder="Conferma Password"/>
                <input type="checkbox"  id="pw_2" onclick="showPassword('password_2')"/>
                <label for="pw_2" ></label>
              </div>
            </p>
          </fieldset>
        </div>
      </div>
    </div>
  </div>

CodePudding user response：

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 occurrences

Read more css-tricks and MDN

Related selectors

:nth-of-type
:nth-last-child()

: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 >paragraph 1 | nth-child(2) = selected</p> 
<p >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 >
    <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 >
    <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>