W3C home > Mailing lists > Public > www-style@w3.org > December 2014

Re: [selectors] New pseudo-element ::inner-wrapper & ::outer-wrapper (feature)

From: Antony Kennedy <booshtukka@me.com>
Date: Mon, 01 Dec 2014 20:23:56 +0000
Cc: www-style list <www-style@w3.org>
Message-id: <FA104EB1-7F61-4CD8-A7C0-184DF7BF4F7A@me.com> (sfid-20141201_202404_194629_82C4128A)
To: "luochen.1990@gmail.com" <luochen.1990@gmail.com>


> On Dec 1, 2014, at 9:23 AM, LuoChen <luochen1990@gmail.com> wrote:
> 
> Hi, guys, I want new pseudo-elements in css:  ::inner-wrapper &
> ::outer-wrapper . which creates a nested pseudo-element inside/outside
> the current element. This way, we can reduce a lot of situations where
> we have to change the html structure only for styling requirement.
> 
> for example, if there is a html like this:
> 
> ```
> <div class="hello-div">
>  hello world!
> </div>
> ```
> 
> and I want to give the div a border with background image.
> 
> Now I have to change the html to
> 
> ```
> <div class="hello-div">
>  <div class="hello-div-inner">
>    hello world!
>  </div>
> </div>
> ```
> 
> and add the following css
> 
> ```
> ..hello-div {
>  padding: 100px;
>  background-image: url(bg.png);
> }
> 
> ..hello-div-inner {
>  padding: 50px;
>  background-color: white;
> }
> ```
> 
> But with the ::inner-wrapper pseudo-element. I don't need to change
> the html but only add css like this:
> 
> ```
> ..hello-div {
>  padding: 100px;
>  background-image: url(bg.png);
> }
> 
> ..hello-div::inner-wrapper {
>  padding: 50px;
>  background-color: white;
> }
> ```
> 
> 
So agree. I've had a note to raise exactly this for months, but I called it "surround" and "contain". 

A
Received on Monday, 8 December 2014 17:56:13 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:49 UTC