niubbo css chiede delucidazioni su porzione codice

[il24]

vorrei fare un esempio di codice

.header-full #logo h1 {margin:0px auto;
float: none;
text-align: center;
}

quale sarebbe un esempio di riga di codice html dove queste proprietà verrebbero applicate?

[wingman87]

<!DOCTYPE html>
<html>
<head>
  <style>
  .header-full #logo h1 {
    margin:0px auto;
    float: none;
    text-align: center;
  }
  </style>
</head>
<body>
  <div class="header-full">
    <div id="logo">
      <h1>Qui viene applicato lo stile</h1>
    </div>
  </div>
</body>
</html>

Ti ho evidenziato le caratteristiche salienti dell'html che "matchano" con il selettore della regola css:
.header-full matcha con gli elementi aventi class header-full
#logo matcha con gli elementi che hanno id logo (dovrebbe essercene solo uno per la definizione di id)
h1 matcha con i tag h1
concatenando questi selettori semplici, separati da spazio, stai imponendo che h1 deve essere discendente (non necessariamente diretto) di un #logo che a sua volta deve essere discendente di un .header-full

[il24]

quindi la discendenza è nella struttura ad albero dell'html
se h1 lo spostassi fuori dall ID tutto non verrebbe applicato giusto?
Un'ultima domanda se la classe impone per esempio una dimensione x il testo , la regola di h1 descritta prevale?

[wingman87]

Se sposti l'h1 fuori dal #logo la regola non viene applicata.
Se a livello di .header-full specifichi un font-size, questo viene ereditato anche dai figli, se vuoi che a quel punto h1 abbia un font-size diverso devi specificarlo con una regola più specifica (scusa il gioco di parole).

Ad esempio con il codice html di prima, in questo modo h1 avrà un font-size di 10px:

.header-full {
    font-size:10px;
}
.header-full #logo h1 {
    margin:0px auto;
    float: none;
    text-align: center;
  }

così invece avrà un font-size di 14px:

.header-full {
    font-size:10px;
}
.header-full #logo h1 {
    margin:0px auto;
    float: none;
    text-align: center;
    font-size:14px;
  }

Il fatto che la regola venga ereditata vale per font-size e molte altre regole ma non per tutte. Vedi qui per maggiori informazioni: https://developer.mozilla.org/en-US/...SS/inheritance

[il24]

sperando di aver capito allora:
così avrebbe font pari a 12

.header-full {
font-size:10px;
}
#logo {
font-size:12px;
}
.header-full #logo h1 {
margin:0px auto;
float: none;
text-align: center;
}

Perche' comanderebbe il font-size di #logo su .header-full , giusto?

[wingman87]

Sì, perché risalendo l'albero da h1 incontri prima #logo e poi .header-full, quindi h1 eredita da #logo.