Selettore CSS per il primo elemento con classe


7 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 viene 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).

Question

Ho un gruppo di elementi con un nome di classe red , 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?

AGGIORNAMENTO :

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 ?




Prova questo semplice codice per il tuo problema

codpen link http://codepen.io/santoshkhalse/pen/xRQYpo

 .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>




Prova questo :

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



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.




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");
    



Ho preso questo nel mio progetto.

div > .b ~ .b:not(:first-child) {
	background: none;
}
div > .b {
    background: red;
}
<div>
      <p class="a">The first paragraph.</p>
      <p class="a">The second paragraph.</p>
      <p class="b">The third paragraph.</p>
      <p class="b">The fourth paragraph.</p>
  </div>




Per qualche motivo, nessuna delle risposte di cui sopra sembrava riguardare il caso del primo vero e unico figlio del genitore.

#element_id > .class_name:first-child

Tutte le risposte di cui sopra non avranno esito positivo se si desidera applicare lo stile solo al figlio della prima classe all'interno di questo codice.

<aside id="element_id">
  Content
  <div class="class_name">First content that need to be styled</div>
  <div class="class_name">
    Second content that don't need to be styled
    <div>
      <div>
        <div class="class_name">deep content - no style</div>
        <div class="class_name">deep content - no style</div>
        <div>
          <div class="class_name">deep content - no style</div>
        </div>
      </div>
    </div>
  </div>
</aside>





Related