HeroreV wrote: >>However, there're cases where you really >>wanted to have ::inside pseudo-element. >>And that's for cases where the backwards >>compatible styles go to the "real" element. > > There's also the case where the real element has > styling already applied to it. If you want to use an > ::outside psuedo element, you have to remove the > original styling from the real element and set it on > the ::outside psuedo element. > > p { > border: thin solid blue; > background-image: url(stripes.png); > } > p.special { > border: none; > background-image: none; > } > p.special::outside { > border: thin solid blue; > background-image: url(stripes.png); > } > > <::outside> > <p class="special"> > <child/> > <child/> > ... > <child/> > </p> > </::outside> [Snip!] Better idea: | p.special { /* Fallback styling */ } | p.special::outside { /* Outer stying */ } | p.special::outside > * { /* Inner stying */ } The <p> element is logically the child of its ::outside pseudo-element. Therefore, you should be able to style it as such. Since a legacy browser wouldn't recognize ::outside, it would ignore both the inner and outer styling and just use the fallback. This avoids introducing a confusing new pseudo-element that's merely and alias for the element itself.Received on Tuesday, 3 January 2006 10:59:24 GMT
This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:42 GMT