Selettore figlio opzionale, con CSS/Stylus/LESS: .aa> .bb? > .cc

Question

considerare questo HTML con le classi CSS aa, bb e cc:

<div class='aa'> 
<div class='bb'> 
<div class='cc'> 
</div> 
</div> 
</div> 

posso selezionare il tag class=cc in questo modo: .aa > .bb > .cc. Tuttavia, nel mio caso, a volte il tag .bb è assente, che è, il codice HTML si presenta in questo modo:

<div class='aa'> 
<div class='cc'> 
</div> 
</div> 

Thererfore, per selezionare tutte .cc vicino ad una .aa, avrei bisogno di specificare due percorsi CSS:

.aa > .bb > .cc, 
.aa > .cc { .... } 

questo funziona, ma, non c'è un modo più breve? Qualcosa di simile a questo:

.aa > (.bb >)? .cc { ... } /* ? means "optional" */ 

con i CSS o qualcosa di simile stilo o di meno?

Motivazione: Nel mondo reale, "aa" e "bb" e "cc" sono nomi un po 'più lunghi, e ci sono altre cose prima e dopo "aa" e "cc", e sarebbe bello non è necessario duplicare quella roba.

Nota: nel mio caso, questo non funzionerà: .aa .cc perché corrisponderebbe a troppi .cc s altrove nella pagina. Gli .cc s devono essere immediatamente sotto lo .aa o sotto .aa > .bb.

Answer 1

Per Stilo e Sass si potrebbe fare questo (live example for Sass):

.aa 
    > .bb, & 
    > .cc 
     width: 10px 

non riuscivo a trovare un modo per farlo in un one-liner per Sass, ma per di meno/stilo/SCS si potrebbe fare anche questo (esempi dal vivo for Scss, for Less):

.aa { > .bb, & { > .cc { 
    width: 10px 
}}} 

Questo non è che abbastanza anche, ma sempre meglio di niente :)

Answer 2

.aa > .cc, .aa > .bb > .cc {} non funziona? O ho frainteso la tua domanda?
Questo seleziona solo i .aa bambini diretti e gli .cc che sono .bb bambini (figli di .aa) pure.

Answer 3

se si desidera utilizzare il vostro op zione, tra l'altro è molto interessante, è possibile utilizzare una forma più corretta:

>.aa (>.bb)? >.cc { ... } 

ma la forma corretta sarebbe:

.aa .cc { ... } 

in stilo:

.aa 
    .cc 

Questo è tutto.