Cambiare tag ad un elemento css

salve avrei necessita di cambiare il tag principale cioè "*" asterisco ho provato a cambiarlo mi deforma tutto il sito cambiandolo come mai?

Codice HTML:

---

* {
  box-sizing: border-box;
}

---

il selettore '*' applica la regola a tutti gli elementi della pagina. Il sito si "deforma" perché tutti gli attributi width o height cambiano significato: invece di indicare la dimensione del contenuto (box-sizing: content-box), indicano la dimensione di contenuto + padding + border-width (box-sizing: border-box). Il risultato su una pagina non costruita per tenerne conto è che alcuni elementi diventano più piccoli.

Vedi: https://developer.mozilla.org/en-US/...CSS/box-sizing

Ho letto quando indicatomi mi scuso ma non ho afferrato Cerco cortesemente la soluzione Ho esigenza di inserire più codice con attributi uguali di tipo di quello preso in considerazione cioè Il tag *

Parto un attimo da lontano, e magari ripeto cose che sono già note, ma lo faccio per assicurarmi di essere nel contesto giusto.

Una regola nel CSS è composta da uno o più selettori, ed uno o più attributi:

Codice:

---

<selettore1>, <selettore2> {
  attributo1: valore;
  attributo2: valore;
}

---

Ad esempio:

Codice:

---

h1, .in-evidenza h2 {
  font-size: 2rem;
  color: red;
}

---

"h1" ad esempio è un selettore che dice "applica questa regola a tutti i tag h1". Invece "*" è un selettore che dice "applica questa regola a tutti i tag, di ogni tipo". Ma "*" non è un tag.

È molto raro usare "*" da solo, perché ha effetto su tutto il contenuto della pagina. Di solito serve solo a resettare qualche valore per poter partire da zero, o in combinazione con altri selettori.

La domanda che mi viene in mente è quindi: qual è il problema che stai cercando di risolvere con *?

Ma il mio è solo una parte del codice che devo modificare cioè il tag * ti posto tutto il codice ok? e ripeto la mia esigenza e modificare il tag *

Codice HTML:

---

* {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: Arial;
  margin: 0;
}

/* Header/logo Title */
.header {
  padding: 30px;
  text-align: left;
  background: #1abc9c;
  color: white;
}

/* Style the top navigation bar */
.navbar {
  display: flex;
  background-color: #333;
}

/* Style the navigation bar links */
.navbar a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Column container */
.row { 
  display: flex;
  flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* Main column */
.main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}

/* Fake image, just for this example */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row, .navbar { 
    flex-direction: column;
  }
}

---

Citazione:

---

Originalmente inviato da dinapoliandrea

e ripeto la mia esigenza è modificare il tag *

---

Ripeto, * non è un tag.

Interpreto che tu voglia modifica la regola associata a * in cima a quello spezzone di codice. Perché la vuoi modificare? Qual è l'effetto che vuoi ottenere?

Se hai aggiunto box-sizing: border-box, cosa stavi cercando di fare?

In effetti è perché ho 2 codici con lo stesso *.
E quando vado ad inserire i due codici, con tag uguali cioè tutti e 2 con asterisco non ottengo quello che voglio anzi mi si deforma tutto come posso fare?

Puoi mettere la pagina in questione online, dove possiamo darci un'occhiata? Meglio ancora due pagine, una con il codice originale, una con il CSS modificato che non funziona.