Stilare solo i alcuni elementi "fratelli" CSS3

**lionalex** · 10-02-2013, 16:08

Vorrei, se possibile, riuscire a stilare alcuni DIV che hanno determinate classi, ma solo se prima di loro ci sono determinati DIV "fratelli". Cerco di spiegarmi meglio con un esempio.
Ho questa struttura:

codice:

<div class="padre">
 <div class="figlio1">fratello 1</div>
 <div class="figlio2">fratello 2</div>
 <div class="figlio2">fratello 3</div>
 <div class="figlio2">fratello 4</div>
 <div class="figlio2">fratello 5</div>
 <div class="figlio2">fratello 6</div>
</div>

In pratica vorrei stilare i div con classe "figlio2", ma solo i primi 3, quindi quelli con testo "fratello 2,fratello 3, fratello 4".
Vorrei poter, però, impostare una regola direttamente nel CSS3, in modo che questo stile sia valido solo per i fratelli di "figlio1" altrimenti no. Quindi ad esempio, per questa struttura

codice:

<div class="padre">
 <div class="figlio2">fratello 2</div>
 <div class="figlio2">fratello 3</div>
 <div class="figlio2">fratello 4</div>
 <div class="figlio2">fratello 5</div>
 <div class="figlio2">fratello 6</div>
</div>

non dovrebbe accadere nulla.
È possibile?

Grazie...

**KillerWorm** · 13-02-2013, 00:34

Potresti usare il selettore "+" (che seleziona un fratello adiacente) o altrimenti "~" (che seleziona tutti gli elementi preceduti da un elemento specifico) seguito da nth-child (che seleziona solo i figli specificati)

Riporto un esempio pratico usando entrambi i metodi sull'esempio che hai postato tu:

codice:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css" >
    
      /* METODO 1: seleziona i div.figlio2 che sono fratelli adiacenti di div.figlio1 e, nell'ordine, dei vari div.figlio2
      */
      div.figlio1+div.figlio2,
      div.figlio1+div.figlio2+div.figlio2,
      div.figlio1+div.figlio2+div.figlio2+div.figlio2
      {color:red}
      
      /* METODO 2:  seleziona qualsiasi div.figlio2 che sia preceduto da un div.figlio1 e che rientri tra i primi 4 figli dell'elemento padre
      */
      div.figlio1~div.figlio2:nth-child(-n+4)
      {background:yellow}
      
    </style>
  </head>
  <body>
    <div class="padre">
     <div class="figlio1">fratello 1</div>
     <div class="figlio2">fratello 2</div>
     <div class="figlio2">fratello 3</div>
     <div class="figlio2">fratello 4</div>
     <div class="figlio2">fratello 5</div>
     <div class="figlio2">fratello 6</div>
    </div>
    <hr>
    <div class="padre">
     <div class="figlio2">fratello 2</div>
     <div class="figlio2">fratello 3</div>
     <div class="figlio2">fratello 4</div>
     <div class="figlio2">fratello 5</div>
     <div class="figlio2">fratello 6</div>
    </div>
  </body>
</html>

**lionalex** · 13-02-2013, 12:26

Grazie mille Killer, funziona ed è quello che cercavo

Avevo fatto delle prove in tal senso, ma utilizzavo "nth-of-type()" pensando di dovermi riferire appunto ai "fratelli" del nodo e non ai "figli" con "nth-child()"...

**KillerWorm** · 13-02-2013, 15:29

No problem!

Giusto un chiarimento: nth-of-type si riferisce comunque ai figli di un elemento padre, come è per nth-child, ma considerando solo i figli di tale tipo.

Nell'esempio postato sopra, puoi utilizzare indifferentemente questi due selettori; otterrai lo stesso identico risultato perché sono presenti solo degli elementi DIV. La differenza è percettibile se all'interno dell'elemento padre vai ad inserirci altri tipi di elementi oltre a quelli di tipo DIV.

Un esempio pratico:

codice:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css" >
    
      /* Seleziona i div.figlio che sono presenti tra i primi 4 figli
      */
      div.figlio:nth-child(-n+4)
      {text-decoration:underline}
      
      /* Seleziona i div.figlio che sono presenti tra i primi 4 figli di tipo div
      */
      div.figlio:nth-of-type(-n+4)
      {color:red}
      
    </style>
  </head>
  <body>
   <div class="figlio">1 - un DIV</div>
   <span class="figlio">2 - uno SPAN</span>
   <div class="figlio">3 - un DIV</div>
   <div class="figlio">4 - un DIV</div>
   <span class="figlio">5 - uno SPAN</span>
   <div class="figlio">6 - un DIV</div>
   <div class="figlio">7 - un DIV</div>
  </body>
</html>

L'output sarà:

codice:

1 - un DIV
2 - uno SPAN
3 - un DIV
4 - un DIV
5 - uno SPAN
6 - un DIV
7 - un DIV

Gli elementi sottolineati sono DIV tra i primi 4 figli, considerando i figli di qualsiasi tipo (nth-child).
Gli elementi rossi sono DIV tra i primi 4 figli di tipo DIV (nth-of-type).

**lionalex** · 14-02-2013, 01:31

grazie mille anche per la spiegazione

Discussione: Stilare solo i alcuni elementi "fratelli" CSS3

Strumenti discussione

Ricerca discussione

Visualizza

Stilare solo i alcuni elementi "fratelli" CSS3

Permessi di invio