¿Qué selecciona el selector '&'?

Question

En this codepen hay un selector css &:hover ¿con qué coincide ese selector?

Answer 1

Creo que el ampersand es una característica Sass. A partir de los documentos:

Referencing Parent Selectors: &

A veces es útil usar selector de matriz de una regla anidada en otras formas que el valor predeterminado. Por ejemplo, es posible que desee tener estilos especiales para cuando ese selector esté sobre o cuando el elemento body tenga una determinada clase. En estos casos, puede explícitamente especificar dónde se debe insertar el selector principal utilizando el & carácter.

Answer 2

Exactamente. En Sass usted podría tener algo como esto ...

div { 
    background: green; 

    p { 
     background: red; 

     &:hover { 
      background: blue; 
     } 

     &:active { 
      background: blue; 
     } 
    } 
} 

... que cuando se convierte en CSS se convertiría en esto:

div { 
    background: green; 
} 

div p { 
    background: red; 
} 

div p:hover { 
    background: blue; 
} 

div p:active { 
    blue; 
} 

Editar: desde & elemento emergente: a &: hover

Answer 3

Un uso que es menos conocido es que puede agregar el ampersand al final de un estilo para que el selector principal se convierta en el elemento secundario.

por ejemplo:

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

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

convierte,

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

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

se puede leer más sobre & uso aquí

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