MENOS - Cambio de orden del selector

Descripción

Anteponer un selector a los selectores heredados (padres) es útil cuando se cambia el orden del selector. Esto se logra colocando&después del selector. Por ejemplo, cuando usa Modernizer, es posible que desee especificar diferentes reglas en función de las funciones compatibles.

Ejemplo

El siguiente ejemplo demuestra el uso de cambiar el orden del selector en el archivo LESS:

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

   <body>
      <div class = "header">
         <div class = "menu">
            <h2>Welcome to TutorialsPoint</h2>
            <p>It is possible to reference the parent selector by using &(ampersand) operator.</p>
         </div>
      </div>
   </body>
</html>

Ahora, cree el archivo style.less .

estilo sin

.header {
   .menu {
      border-radius: 5px;
      border: 1px solid red;
      & {
         padding-left: 200px;
      }
   }
}

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

.header .menu {
   border-radius: 5px;
   border: 1px solid red;
   padding-left: 200px;
}

los .no-borderradius & el selector antepondrá .no-borderradius a su selector padre .header .menu

Salida

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

Guarde el código html anterior en el changing_selector_order.htm archivo.
Abra este archivo HTML en un navegador, se mostrará el siguiente resultado.

↰ Previous page