Come ereditare css dal tag grandparent?

Question

Sto avendo un div nidificato a due livelli e voglio applicare il div in possesso di una classe "c" con la stessa larghezza di div con classe a. Se è genitore, suppongo che erediterò il lavoro. Ma cosa si deve fare in questo caso?

codice HTML:

<div class="a"> 
    <div class="b"> 
    <div class="c"> 

    </div> 
    </div> 
</div> 

codice CSS

.a{ 
width:600px; 
} 
.b{ 
width:80%; 
} 
.c{ 
//needs to inherit width property set for class a without directly mentioning it as 600px 
} 

Answer 1

Purtroppo si può fare questo in puro CSS, per impostazione predefinita l'elemento figlio non eredita la width, è necessario specificare Sì, per impostazione predefinita si estenderà al 100% se si utilizza un elemento a livello di blocco come un tag div o p ma inorder su ereditare (ri uso) di proprietà del nonno è possibile utilizzare processori CSS pre piace di meno o SASS ..

Quindi, se si vuole fare questo in SASS possiamo fare qualcosa di simile

.a { 
    width: 600px; 
} 

.b { 
    width: 80%; 
} 

.c { 
    @extend .a; 
    //This is still not an inheritance, you are simply pulling in all the 
    //properties defined in .a to this class 
} 

Così qui sceglierà tutte le proprietà da .a a .c. Ma qui è un fermo, quando si utilizza . notazione SASS, verrà letteralmente stampare il blocco .a pure, quindi se si desidera utilizzare solo per @extend scopo, è possibile scrivere questo selettore invece

%a { 
    width: 600px; 
} 

.c { 
    @extend %a; 
} 

Qui SASS non stampa .a più ma solo .c .Se possibile consultare la documentazione ufficiale per più sopra SASS @extend

è inoltre possibile definire le variabili in SASS definendo così uno con $base-width: 600px; e re di utilizzarlo in tutta può avere senso pure. Se vuoi continuare a utilizzare il CSS tradizionale, ti consiglio di dichiarare più classi come suggerito da Manoj, ma non lo farei come se dichiarassi proprietà in .a e lo stesso in .c le cose inizieranno a diventare disordinate.

Answer 2

È possibile aggiungere più classi al div niparo a include le proprietà di a a c.

Anche l'impostazione dell'80% per .b corrisponderà all'80% di 600 px = 480px per .c È necessario modificarlo al 100%.

.a { 
 
    width: 600px; 
 
} 
 
.b { 
 
    width: 100%; 
 
}

<div class="a"> 
 
    <div class="b"> 
 
    <div class="a c"> 
 
     I am 600px wide. 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

seguito è una possibilità e come tale potrebbe essere utile, ma non è raccomandato come il modo migliore per la maggior parte dei casi. Mi ricorda i problemi con le unità em.

L'utilizzo di un pre-processore con variabili è un modo migliore, anche se non è esattamente ereditarietà né puro css.

.a { 
    width:600px; 
} 
.b { 
    width:80%; 
} 
.c { 
    width: 125%; 
} 

Qualora il .c { width } è 100/.b { width } * 100, oppure nell'esempio 125%.

vedere una example here on JSFiddle

Si sta ancora ereditando dal genitore, ma il genitore a sua volta eredita dal nonno.