Cosa seleziona il selettore "&"?

Question

Nel codice this c'è un selettore css &:hover che cosa corrisponde a quel selettore?

Answer 1

credo che la e commerciale è una caratteristica Sass. Dalla documentazione:

Referencing Parent Selectors: &

A volte è utile usare il selettore madre di una regola nidificato in altri modi da quello predefinito. Ad esempio, potresti voler avere speciali stili per quando il selettore viene posizionato sopra o quando l'elemento body ha una certa classe. In questi casi, è possibile esplicitamente specificare dove il selettore genitore deve essere inserito utilizzando il carattere & .

Answer 2

Esattamente

. In Sass si potrebbe avere qualcosa di simile ...

div { 
    background: green; 

    p { 
     background: red; 

     &:hover { 
      background: blue; 
     } 

     &:active { 
      background: blue; 
     } 
    } 
} 

... che una volta convertito in CSS sarebbe diventato questo:

div { 
    background: green; 
} 

div p { 
    background: red; 
} 

div p:hover { 
    background: blue; 
} 

div p:active { 
    blue; 
} 

Edit: da & hover: a &: hover

Answer 3

Un utilizzo meno noto è che è possibile aggiungere la e commerciale alla fine di uno stile in modo che il selettore principale diventi figlio.

esempio:

h3 
    font-size: 20px 
    margin-bottom: 10px 

.some-parent-selector & 
    font-size: 24px 
    margin-bottom: 20px 

diventa,

h3 { 
    font-size: 20px; 
    margin-bottom: 10px; 
    } 

    .some-parent-selector h3 { 
    font-size: 24px; 
    margin-bottom: 20px; 
    } 

si può leggere di più su & uso qui

http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand