html - Change styling when add new sibling in pure CSS -

i have container children:

<div id="container">     <div></div>     <div></div>     <div></div> </div> 

sometimes want add child (server-side) container , change styling of other children make room new sibling. become:

<div id="container">     <div id="special"></div>     <div></div>     <div></div>     <div></div> </div> 

can achieve purely in css? there fancy new selectors (css4?) can use?

i want avoid javascript or changing attributes (classes) of of elements. did read lack of parent selectors in css articles read couple of years old, suspect there might brand new selectors can take advantage of.

#container #special {   float: left;   background: yellow; } #container div {   /* float: none; default */   background: white; } 

is simplest way style elements differently in css: div styled because of second rule (whether or not special element exists or not) , first rule apply 1 special element if exists, more specificity first one. both rules apply properties in first rule should override in second rule.

now if want style other divs differently when special element exists:
in example, no div precedes special 1 don't need preceding sibling selector; using general sibling selector sufficient:

#container div {   padding: 5px; } #container #special ~ div {   padding: 10px; } 

could special element created in 2nd, 3rd, etc position?
similar trick selecting first half of elements used (combination of :nth-child()/:nth-last-child(), has limitations, upper bound of elements set , won't work more elements - , selector looooong , relatively inefficient. gzip really though :) )