MENO - Estendi collegato al selettore

Descrizione

Extendè collegato a un selettore che sembra simile a una pseudo classe con selettore come parametro. Quando il set di regole ha molti selettori, è possibile applicare l'estensione della parola chiave a qualsiasi selettore. Il formato seguente può essere utilizzato per definire l' estensione nel codice.

  • Estendi dopo il selettore [Es: pre: hover: extent (div pre) ]

  • Consente lo spazio tra il selettore e l'estensione [Es: pre: hover: extent (div pre) ]

  • Consente estensioni multiple [ad esempio: pre: hover: extent (div pre): extent (.bucket tr) o pre: hover: extended (div pre, .bucket tr) ]

  • L'estensione deve essere definita alla fine del selettore. pre: hover: extent (div pre) .nth-child (odd) type non è consentito.

Esempio

Il seguente esempio dimostra l'uso di estendere allegato al selettore nel file LESS -

extended_syntax.htm

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

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         <div class = "container">
            <p>Hello!!!!!</p>
         </div>
      </div>
   </body>
</html>

Quindi, crea il file style.less .

style.less

.style,
.container{
   background: #BF70A5;
}

.img,
.container{
   font-size: 45px;
   font-style: italic;
}

È possibile compilare il file style.less in style.css utilizzando il seguente comando:

lessc style.less style.css

Esegui il comando precedente; creerà automaticamente il file style.css con il seguente codice:

style.css

.style {
   background: #BF70A5;
}

.container,
.style {
   font-style: italic;
}

.img,
.style {
   font-size: 45px;
}

Produzione

Segui questi passaggi per vedere come funziona il codice sopra:

  • Salva il codice html sopra nel file extend_syntax.htm file.

  • Apri questo file HTML in un browser, verrà visualizzato il seguente output.