📢 Nuovo Corso Bootstrap Completo disponibile!
Home documentazione html classi

Classi in HTML

L’attributo “class” in HTML viene utilizzato per specificare una classe per un elemento HTML.

PiĂą elementi HTML possono condividere la stessa classe.

Utilizzo dell’attributo “class”

L’attributo “class” viene spesso utilizzato per puntare a un nome di classe in un foglio di stile (CSS). Può anche essere utilizzato da JavaScript per accedere e manipolare gli elementi con il nome di classe specifico.

Nell’esempio seguente abbiamo tre elementi <div> con un attributo “class” con il valore di “container”. Tutti e tre gli elementi <div> avranno lo stesso stile definito nella sezione <style> con il selettore .container:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        background-color: salmon;
        color: white;
        border: 2px solid black;
        margin: 20px;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>Youtube</h2>
      <p>App per vedere video.</p>
    </div>


    <div class="container">
      <h2>Whatsapp</h2>
      <p>App di messaggistica.</p>
    </div>


    <div class="container">
      <h2>Paypal</h2>
      <p>App per pagamenti e scambio denaro.</p>
    </div>
  </body>
</html>

L’attributo “class” può essere utilizzato su qualsiasi elemento HTML.

Il nome della classe è sensibile alle maiuscole e minuscole!

Impararerai molto di piĂą sul CSS nella nostra Guida di CSS.

Sintassi per la classe

Per creare una classe, scrivi un punto (.) seguito da un nome di classe. Quindi, definisci le proprietà CSS all’interno delle parentesi graffe {}:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        background-color: salmon;
        color: white;
        border: 2px solid black;
        margin: 20px;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>Youtube</h2>
      <p>App per vedere video.</p>
    </div>


    <!-- altri elementi... -->
  </body>
</html>

Classi multiple

Gli elementi HTML possono appartenere a piĂą di una classe.

Per definire classi multiple, separa i nomi delle classi con uno spazio, ad esempio <div class="container card">. L’elemento verrà stilizzato in base a tutte le classi specificate.

Nell’esempio seguente, il primo elemento <div> appartiene sia alla classe “container” che alla classe “card” e otterrà gli stili CSS da entrambe le classi:

<div class="container card">
  <h2>Youtube</h2>
  <p>App per vedere video.</p>
</div>


<div class="container">
  <h2>Whatsapp</h2>
  <p>App di messaggistica.</p>
</div>


<div class="container">
  <h2>Paypal</h2>
  <p>App per pagamenti e scambio denaro.</p>
</div>

Elementi diversi possono avere la stessa classe

Diversi elementi HTML possono puntare allo stesso nome di classe.

Nell’esempio seguente, sia <h2> che <p> puntano alla classe “container” e condivideranno lo stesso stile:

<h2 class="container">Paypal</h2>
<p class="container">App per pagamenti e scambio denaro.</p>

Uso dell’attributo “class” in JavaScript

Il nome della classe può anche essere utilizzato da JavaScript per eseguire determinate operazioni sugli elementi specifici.

JavaScript può accedere agli elementi con un nome di classe specifico tramite il metodo getElementsByClassName():

// Clicca pulsante per nascondere tutti gli elementi di classe "container"
function myFunction() {
  var x = document.getElementsByClassName("container");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}

Non preoccuparti se non comprendi il codice nell’esempio sopra. Imparerai di più su JavaScript nella nostra Guida a JavaScript.