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

01.12.2014, 22:54, "LuoChen" <luochen1990@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.

Wrapping single elements would be of limited usefulness (though still better than nothing).

What's more demanded is ability to pseudo-wrap _multiple_ sibling elements, so that we could style, for example, `DT`/`DD` groups as a single thing without need for wrapping each such group in its own `DL` (we can't wrap them in `DIV` per HTML spec) and wrapping each such `DL` in `LI` inside `UL` to preserve marking items up together as a solid list.

For example, if we need to style each `DT`/`DD` group, we are currently forced to do this:

šššš<ul>
šššššššš<li><dl>
šššššššššššš<dt>Foo</dt>
šššššššššššš<dd>Bar</dd>
šššššššš</dl></li>

šššššššš<li><dl>
šššššššššššš<dt>Lorem</dt>
šššššššššššš<dd>Ipsum</dd>
šššššššš</dl></li>
šššš</ul>

With CSS preudo-wrappers, we could have a single continuous `DL` in HTML:

šššš<dl class="example">
šššššššš<dt>Foo</dt>
šššššššš<dd>Bar</dd>

šššššššš<dt>Lorem</dt>
šššššššš<dd>Ipsum</dd>
šššš</dl>

and then style `DT`/`DD` groups inside it somehow like this:

ššššDL.example > DT {group-open: myGroupName; }
ššššDL.example > DD {group-close: myGroupName; }

šššš/* Show green border around each `DT`/`DD` group. */
šššš::group(myGroupName) {
ššššššššborder: 2px solid #0d0;
šššš}

By the way, each such group could then also be additionally wrapped (as needed) in something like single-thing wrappers you've proposed.

Received on Monday, 1 December 2014 21:32:14 UTC