MOINS - Sélecteurs de parents

Dans ce chapitre, comprenons comment Parent Selectorstravail. Il est possible de référencer le sélecteur parent en utilisant le&(esperluette) opérateur. Les sélecteurs parents d'une règle imbriquée sont représentés par le& et est utilisé lors de l'application d'une classe de modification ou d'une pseudo-classe à un sélecteur existant.

Le tableau suivant montre les types de sélecteur parent -

N ° Sr. Types et description
1 Plusieurs &

le & représentera le sélecteur le plus proche ainsi que tous les sélecteurs parents.
2 Modification de l'ordre des sélecteurs

La prépension d'un sélecteur aux sélecteurs hérités (parents) est utile lorsque l'ordre des sélecteurs est modifié.
3 Combinatorial Explosion

le & peut également produire toutes les permutations possibles de sélecteurs dans une liste séparée par des virgules.

Exemple

L'exemple suivant illustre l'utilisation du sélecteur parent dans le fichier LESS -

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>Parent Selector</title>
   </head>

   <body>
      <h2>Welcome to TutorialsPoint</h2>
      <ul>
         <li><a>SASS</a></li>
         <li><a>LESS</a></li>
      </ul>
   </body>
</html>

Ensuite, créez le fichier style.less .

sans style

a {
   color: #5882FA;
   &:hover {
      background-color: #A9F5F2;
   }
}

Vous pouvez compiler le fichier style.less dans style.css à l'aide de la commande suivante -

lessc style.less style.css

Exécutez la commande ci-dessus; il créera automatiquement le fichier style.css avec le code suivant -

style.css

a {
   color: #5882FA;
}

a:hover {
   background-color: red;
}

Dans l'exemple ci-dessus, & fait référence au sélecteur a.

Production

Suivez ces étapes pour voir comment fonctionne le code ci-dessus -

  • Enregistrez le code html ci-dessus dans le parent_selector1.htm fichier.

  • Ouvrez ce fichier HTML dans un navigateur, la sortie suivante s'affichera.

L' opérateur Sélecteurs parent a de nombreuses utilisations, par exemple lorsque vous devez combiner les sélecteurs de la règle imbriquée d'une manière différente de celle par défaut. Une autre utilisation typique de&est de générer des noms de classe à plusieurs reprises. Pour plus d'informations, cliquez ici .