Perché l'ennesimo tipo di lavoro non funziona?

Question

Ho il seguente codice HTML:

<section class="history"> 
    <div class="asked"> 
    <h1 class="user-show-tab-title">Questions</h1> 
    <div> 
     <ul class="question-index-false"></ul> 
    </div> 
    </div> 
    <div class="answered"> 
    <h1 class="user-show-tab-title">Answers</h1> 
    <div> 
     <ul class="question-index-false"></ul> 
    </div> 
    </div> 
</section> 

Sto disperatamente cercando di selezionare e stile il 2 ° h1 elemento con la classe "user-show-scheda-title" (quello con "risposte") ma per qualche motivo, .user-show-tab-title:nth-of-type(1) li seleziona entrambi e .user-show-tab-title:nth-of-type(2) non seleziona nulla.

Cosa dà?

Answer 1

Ecco perché sono entrambi i primi del tipo h1 all'interno di un div. nth-of-type si applica solo alla relazione figlio immediato.

Si noti inoltre che i selettori nth relativi partono da 1, quindi per selezionare la seconda si usa 2, non 1.

Non so il codice HTML vero e proprio, ma per quello che si ha, si può solo utilizzare

.answered .user-show-tab-title 

Se davvero si vuole utilizzare nth-of-type, ecco come si può utilizzare. Sto inserendo qualche manichino <p> s altrimenti, tutti i figli di <section> sarebbero dello stesso tipo.

.history div:nth-of-type(1) .user-show-tab-title { 
 
    background-color: lightblue; 
 
} 
 

 
.history div:nth-of-type(2) .user-show-tab-title { 
 
    background-color: #eee; 
 
}

<section class="history"> 
 
     <p>Dummy paragraph</p> 
 
     <p>Dummy paragraph</p> 
 
     <div class="asked"> 
 
     <h1 class="user-show-tab-title">Questions</h1> 
 
     <div> 
 
      <ul class="question-index-false"></ul> 
 
     </div> 
 
     </div> 
 
     <p>Dummy paragraph</p> 
 
     <p>Dummy paragraph</p> 
 
     <p>Dummy paragraph</p> 
 
     <div class="answered"> 
 
     <h1 class="user-show-tab-title">Answers</h1> 
 
     <div> 
 
      <ul class="question-index-false"></ul> 
 
     </div> 
 
     </div> 
 
    </section>

Answer 2

Perché non basta selezionare .answered h1 invece? :) il tuo selezionatore non funzionerà perché sono sotto genitori diversi.