css-selectors selector child - Selettore CSS per il primo elemento con classe





9 Answers

Il selettore :first-child è inteso, come dice il nome, a selezionare il primo figlio di un tag genitore. I bambini devono essere incorporati nello stesso tag principale. Il tuo esatto esempio funzionerà (ho appena provato here ):

<body>
    <p class="red">first</p>
    <div class="red">second</div>
</body>

Forse hai nidificato i tuoi tag in diversi tag principali? I tuoi tag di classe red davvero i primi tag sotto il genitore?

Si noti inoltre che questo non si applica solo al primo tag di questo tipo nell'intero documento, ma ogni volta che un nuovo genitore è avvolto attorno ad esso, come:

<div>
    <p class="red">first</p>
    <div class="red">second</div>
</div>
<div>
    <p class="red">third</p>
    <div class="red">fourth</div>
</div>

first e il third saranno poi rossi.

Aggiornare:

Non so perché Martin abbia cancellato la sua risposta, ma ha avuto la soluzione, il selettore: :nth-of-type :

<html>
<head>
<style type="text/css">
.red:nth-of-type(1)
{
    border:5px solid red;
} 
</style>
</head>

<body>
    <div class="home">
        <span>blah</span>
        <p class="red">first</p>
        <p class="red">second</p>
        <p class="red">third</p>
        <p class="red">fourth</p>
    </div>
</body>
</html>

Crediti a Martyn . Maggiori informazioni per esempio here . Tieni presente che si tratta di un selettore CSS 3, quindi non tutti i browser lo riconosceranno (ad es. IE8 o precedente).

parent attribute plus

Ho un mucchio di elementi con un nome di classe red , ma non riesco a selezionare il primo elemento con la class="red" usando la seguente regola CSS:

.red:first-child {
    border: 5px solid red;
}
<p class="red"></p>
<div class="red"></div>

Cosa c'è di sbagliato in questo selettore e come lo correggo?

Grazie ai commenti, ho capito che l'elemento deve essere il primo figlio del suo genitore per essere selezionato, il che non è il caso che io abbia. Ho la seguente struttura, e questa regola fallisce come menzionato nei commenti:

.home .red:first-child {
    border: 1px solid red;
}
<div class="home">
    <span>blah</span>
    <p class="red">first</p>
    <p class="red">second</p>
    <p class="red">third</p>
    <p class="red">fourth</p>
</div>

Come posso indirizzare il primo bambino con la classe red ?




potresti usare first-of-type o nth-of-type(1)

.red {
  color: green;  
}

/* .red:nth-of-type(1) */
.red:first-of-type {
  color: red;  
}
<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>




Visto che le altre risposte coprono ciò che non va, proverò l'altra metà, come risolverlo. Sfortunatamente, non so che tu abbia una soluzione CSS solo qui, almeno non che io possa pensare . Ci sono alcune altre opzioni però ....

  1. Assegna una first classe all'elemento quando lo generi, in questo modo:

    <p class="red first"></p>
    <div class="red"></div>
    

    CSS:

    .first.red {
      border:5px solid red;
    }
    

    Questo CSS corrisponde solo agli elementi con entrambe red classi first e red .

  2. In alternativa, fai lo stesso in JavaScript, ad esempio, ecco cosa jQuery useresti per fare ciò, usando lo stesso CSS di cui sopra:

    $(".red:first").addClass("first");
    



Puoi cambiare il tuo codice in qualcosa di simile per farlo funzionare

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

Questo fa il lavoro per te

.home span + .red{
      border:3px solid green;
    }

Ecco un riferimento CSS da SnoopCode riguardo.




Le risposte di cui sopra sono troppo complesse.

.class:first-of-type { }

Questo selezionerà il primo tipo di classe. Fonte MDN




Prova questo :

    .class_name > *:first-child {
        border: 1px solid red;
    }



Prova questo semplice ed efficace

 .home > span + .red{
      border:1px solid red;
    }



Prova questa soluzione:

 .home p:first-of-type {
  border:5px solid red;
  width:100%;
  display:block;
}
<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

Collegamento CodePen




Credo che usare il selettore relativo + per selezionare gli elementi posizionati immediatamente dopo, funzioni qui il meglio (come pochi hanno suggerito prima).

È anche possibile che questo caso utilizzi questo selettore

.home p:first-of-type

ma questo è il selettore di elementi non quello di classe.

Qui hai una bella lista di selettori CSS: https://kolosek.com/css-selectors/




Related