Démystifier l'esperluette (&) dans les sélecteurs de pseudo-éléments CSS

Lorsque vous rencontrez du code comme celui-ci en CSS, il est naturel de s'interroger sur la signification de l'esperluette (& ) caractère :

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}

Cependant, il est important de noter que cette syntaxe ne fait pas partie du CSS. Au lieu de cela, il appartient à un préprocesseur CSS appelé LESS.

LESS vous permet d'imbriquer les modificateurs de sélecteur à l'aide du caractère esperluette. Cela vous permet d'écrire du code concis et lisible en évitant les répétitions. Par exemple :

.clearfix { 
  &:before {
    content: '';
  }
}

Ceci sera compilé en :

.clearfix:before {
  content: '';
}

L'esperluette garantit que les sélecteurs imbriqués se compilent en .clearfix:before. Sans cela, ils compileraient en .clearfix :before, ce qui entraînerait un sélecteur CSS non valide.

Dans l'exemple Twitter Bootstrap que vous avez fourni, l'esperluette est utilisée pour appliquer des styles aux pseudo-éléments (::before et ::after) qui sont créés en tant qu'enfants de l'élément .clearfix. Cela vous permet de définir ces pseudo-éléments de manière concise et de maintenir une structure modulaire au sein de votre CSS.