Re: "::inside" Pseudo-Element

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 UTC