Nidificazione classi CSS

Question

Posso fare qualcosa di simile al seguente?

.class1{some stuff} 

.class2{class1;some more stuff} 

Answer 1

Non possibile con vaniglia CSS. Tuttavia è possibile usare qualcosa come:

• Sass

Sass rende nuovo divertente CSS. Sass è un'estensione del CSS3 , che aggiunge le regole nidificate , le variabili, il mixin, il selettore e altro ancora. E 'tradotto in CSS standard ben formattato usando lo strumento da riga di comando o un plugin per framework web .

O

• Less

Piuttosto che costruire il selettore lunghi nomi per specificare eredità, in meno si può semplicemente selettori nido all'interno altri selettori. Ciò rende più breve l'ereditarietà e i fogli di stile .

Esempio:

#header { 
    color: red; 
    a { 
    font-weight: bold; 
    text-decoration: none; 
    } 
} 

Answer 2

Non

direttamente. Ma puoi usare estensioni come LESS per aiutarti a raggiungere lo stesso risultato.

Answer 3

Non con puro CSS. L'equivalente più vicino è questo:

.class1, .class2 { 
    some stuff 
} 

.class2 { 
    some more stuff 
} 

Answer 4

No.

È possibile utilizzare grouping selectors e/o più classi in un unico elemento, oppure è possibile utilizzare un linguaggio e di processo modello con il software per scrivere il CSS.

Vedere anche il mio articolo su CSS inheritance.

Answer 5

Non credo sia possibile. È possibile aggiungere class1 a tutti gli elementi che hanno anche class2. Se questo non è pratico da fare manualmente, puoi farlo automaticamente con JavaScript (abbastanza facile da fare con jQuery).

Answer 6

Aggiornamento: Esiste una specifica CSS3 per il nesting di livello 3 CSS. Attualmente è una bozza. https://tabatkins.github.io/specs/css-nesting/

Se approvata, la sintassi sarebbe simile a questa:

table.colortable { 
    & td { 
    text-align:center; 
    &.c { text-transform:uppercase } 
    &:first-child, &:first-child + td { border:1px solid black } 
    } 
    & th { 
    text-align:center; 
    background:black; 
    color:white; 
    } 
} 

Answer 7

Prova questa ...

Dare l'elemento di un ID, e anche un nome di classe. Quindi puoi annidare il #IDName.className nel tuo CSS.

Ecco una spiegazione migliore https://css-tricks.com/multiple-class-id-selectors/