Applica lo stile all'elemento, solo se esiste un certo elemento accanto ad esso

Question

Sto utilizzando il tag <section> su più pagine, ma su UNA pagina sto utilizzando un tag <aside> preceduto dal tag <section>.

Nel caso in cui io abbia un <section> immediatamente seguito da un <aside>, vorrei applicare una larghezza ad entrambi e avere la sezione flottante a sinistra, e il lato galleggia a destra.

In sostanza, se ho un <section> e <aside> voglio lo stile di lavorare in questo modo:

section { 
    width: 500px; 
    float: left; 
    padding: 8px; 
} 

aside { 
    padding:8px; 
    width:400px; 
    float:right; 
} 

Se ho solo il <section> io voglio che sia come:

section { 
    padding: 8px; 
} 

Is c'è un modo in cui posso farlo con un'istruzione condizionale in CSS3, o una pseudo-classe, senza dover usare JavaScript, classi personalizzate o file CSS separati?

Answer 1

Questo funziona solo se il <section/> viene dopo la <aside/>:

<aside>content</aside> 
<!-- if there is another node in between, use the '~' selector --> 
<section>content</section> 

In tal caso si potrebbe usare aside ~ section o aside + section:

section { 
    padding: 8px; 
} 
aside + section { 
    width: 500px; 
    float: left; 
} 

In tutti gli altri casi si dovrà utilizzare JavaScript perché questi selettori funzionano solo in una direzione, dall'alto verso il basso.

Con i CSS4 potrebbe esserci un modo per utilizzare lo Subject of a selector with Child combinator, ma questo è il futuro. Questo selettore è stato rimosso dalle specifiche.