Comment fonctionne l'esperluette (&) dans les sélecteurs imbriqués CSS ?

Sélecteurs imbriqués en CSS : une esperluette (&) découverte

Dans le domaine du CSS, le symbole esperluette (&) joue un rôle important rôle lorsqu’il est utilisé avec des pseudo-éléments. Les développeurs rencontrent cette syntaxe dans des bibliothèques telles que Twitter Bootstrap, mais sa véritable nature n'est pas immédiatement apparente.

Ce que fait l'esperluette

Dans l'exemple fourni par Twitter Bootstrap , l'esperluette (&) est utilisée avec les pseudo-éléments :before et :after. Cette syntaxe permet l'imbrication des modificateurs de sélecteur.

Syntaxe LESS, pas CSS

Il est important de noter que la syntaxe en question ne fait pas partie du CSS mais appartient à LESS, un préprocesseur qui étend CSS. LESS simplifie le processus de développement en fournissant des caractéristiques et des fonctionnalités supplémentaires.

Exemple d'utilisation et de compilation

L'exemple suivant illustre le fonctionnement de l'esperluette (&) :

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

Ce code se compilera en :

.clearfix:before {
  content: '';
}

Sans l'esperluette (&), le code se compilerait en :

.clearfix :before {
  content: '';
}

En utilisant l'esperluette (&), le sélecteur imbriqué se compile en .clearfix:before, alors que sans lui, il se compile en .clearfix :before. Cette distinction est cruciale pour un style correct.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!