MENOS - Alterando a ordem do seletor

Descrição

Anexar um seletor aos seletores herdados (pai) é útil quando a ordem do seletor é alterada. Isso é conseguido colocando&após o seletor. Por exemplo, ao usar o Modernizer, você pode desejar especificar regras diferentes, dependendo dos recursos suportados.

Exemplo

O exemplo a seguir demonstra o uso de alterar a ordem do seletor no arquivo 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>

Agora, crie o arquivo style.less .

style.less

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

Você pode compilar o arquivo style.less para style.css usando o seguinte comando -

lessc style.less style.css

Execute o comando acima; ele criará o arquivo style.css automaticamente com o seguinte código -

style.css

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

o .no-borderradius & o seletor irá preceder .no-borderradius para seu seletor pai .header .menu

Resultado

Siga estas etapas para ver como o código acima funciona -

Salve o código html acima no changing_selector_order.htm Arquivo.
Abra este arquivo HTML em um navegador, a seguinte saída será exibida.

↰ Previous page