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

• From: LuoChen <luochen1990@gmail.com>
• Date: Mon, 1 Dec 2014 17:23:59 +0800
• To: www-style list <www-style@w3.org>
• Message-ID: <CAKj+52s34XhT50Gs5MRoK2ZJqSPbxbJP7SAwagjjJDnH59h_+Q@mail.gmail.com>

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;
}
```

Received on Monday, 1 December 2014 19:52:54 UTC