MENOS - Selectores de padres

En este capítulo, entendamos cómo Parent Selectorstrabajo. Es posible hacer referencia al selector principal utilizando el&(y comercial) operador. Los selectores principales de una regla anidada están representados por& operador y se utiliza al aplicar una clase de modificación o pseudoclase a un selector existente.

La siguiente tabla muestra los tipos de selector principal:

No Señor. Tipos y descripción
1 Múltiples y

los & representará el selector más cercano y también todos los selectores principales.
2 Cambiar el orden del selector

Anteponer un selector a los selectores heredados (padres) es útil cuando se cambia el orden del selector.
3 Combinatorial Explosion

los & también puede producir todas las posibles permutaciones de selectores en una lista separada por comas.

Ejemplo

El siguiente ejemplo demuestra el uso del selector principal en el archivo 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>

A continuación, cree el archivo style.less .

estilo sin

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

Puede compilar el archivo style.less en style.css usando el siguiente comando:

lessc style.less style.css

Ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:

style.css

a {
   color: #5882FA;
}

a:hover {
   background-color: red;
}

En el ejemplo anterior, & se refiere al selector a.

Salida

Siga estos pasos para ver cómo funciona el código anterior:

  • Guarde el código html anterior en el parent_selector1.htm archivo.

  • Abra este archivo HTML en un navegador, se mostrará el siguiente resultado.

El operador de selectores principales tiene muchos usos, como cuando necesita combinar los selectores de la regla anidada de otra manera que no sea la predeterminada. Otro uso típico de&es generar nombres de clases repetidamente. Para más información haga clic aquí .