Visualizzazione dei risultati da 1 a 3 su 3

Discussione: Classi css

  1. #1
    Utente di HTML.it
    Registrato dal
    Jun 2014
    Messaggi
    43

    Classi css

    Salve a tutti qualcuno potrebbe spiegarmi quando ne css definisco due classi una accanto all'altra, ovvero in questo modo ( .change .bar1 {.....}).
    Il seguente dubbio è sorto dal seguente sorgente
    codice HTML:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .container {
        display: inline-block;
        cursor: pointer;
    }
    
    .bar1, .bar2, .bar3 {
        width: 35px;
        height: 5px;
        background-color: #333;
        margin: 6px 0;
        transition: 0.4s;
    }
    
    .change .bar1 {
        -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
        transform: rotate(-45deg) translate(-9px, 6px) ;
    }
    
    .change .bar2 {opacity: 0;}
    
    .change .bar3 {
        -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
        transform: rotate(45deg) translate(-8px, -8px) ;
    }
    </style>
    </head>
    <body>
    
    <p>Click on the Menu Icon to transform it to "X":</p>
    <div class="container" onclick="myFunction(this)">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>
    
    <script>
    function myFunction(x) {
        x.classList.toggle("change");
    }
    </script>
    
    </body>
    </html>
    Grazie in anticipo.

  2. #2
    Utente di HTML.it
    Registrato dal
    Jul 2016
    Messaggi
    112
    La domanda quale sarebbe?

  3. #3
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Ciao, non ti nascondo che sono nozioni di base, in tal caso può esserti utile studiare qualche guida di base se non lo hai già fatto. Posso consigliarti di dare uno sguardo tra i link utili css (discussione in evidenza nel forum CSS), sul primo capitolo trovi diverse guide di base.

    Detto ciò, si tratta di capire la costruzione del selettore css che hai indicato.
    Partiamo da un semplice esempio:
    codice:
    div p{
    ....
    }
    Lo spazio tra i due elementi (div e p) specifica semplicemente il selettore "discendente".
    Cioè, nell'esempio, sarà considerato qualsiasi elemento p che sia discendente di un elemento div. In altre parole, ogni p che abbia come "genitore" (anche se non diretto), un elemento div.

    Allo stesso modo funziona usando delle classi, prendendo il tuo esempio:
    codice:
    .change .bar1{
    ....
    }
    Questo selettore considera qualsiasi elemento che abbia classe .bar1 e che sia discendente di un elemento con classe .change.

    Fa parte dei selettori combinatori (o di relazione).

    Qui o qui qualche altra nozione per approfondire le differenti caratteristiche tra i vari selettori combinatori.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.