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

Thx, I'm happy that you like it .

I have more detailed designations and usages about them:

1. Nested ?
Yes, I think div::inner-wrapper::inner-wrapper should be valid.

2. Use with ::before & ::after ?
Yes, you can use div::inner-wrapper::before and even div::inner-wrapper::inner-wrapper::before to create more than two pseudo-elements which breaks the strange limitation of number of 
pseudo-elements.

3. Will the pseudo-wrappers affect the direct-children selector ?
No, div>button will still work as if the pseudo-wrappers didn't exist.

4. About the "parent-selector" requirements:
Guys who wants parent-selectors, maybe pseudo-wrappers is the enough thing you need.

5. About the "padding 10px+15%" requirements:
The pseudo-wrappers may be a good solution about this. Just use the ::inner-wrapper to get another part of padding.


> 在 2014年12月2日，上午4:23，Antony Kennedy <booshtukka@me.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 Tuesday, 2 December 2014 19:25:24 UTC