Re: [csswg-drafts] Proposal: Add wrapper pseudo element

Here are some older discussions about this:

- [Proposing ::contents 
pseudo-element‏‏](https://lists.w3.org/Archives/Public/www-style/2015Oct/0105.html)
- [A *:body pseudo 
class](https://lists.w3.org/Archives/Public/www-style/2014Jan/0621.html)
- [[selectors] New pseudo-element ::inner-wrapper & ::outer-wrapper 
(feature)](https://lists.w3.org/Archives/Public/www-style/2014Dec/0013.html)
- [[css4-pseudo] The need for more powerful pseudo 
elements](https://lists.w3.org/Archives/Public/www-style/2013Apr/0645.html)
- [[whatwg] wrapper 
element](https://lists.w3.org/Archives/Public/public-whatwg-archive/2011Feb/0530.html)

I skimmed through them and saw two counter proposals:

Use tagging for wrapping
================

Idea
----

Tag the start and end elements via `group-open` and `group-close` 
properties and introduce a `::group()` pseudo-element making use of 
that tags to style the elements between them.

This was [proposed by Marat Tanalin in '[selectors] New pseudo-element
 ::inner-wrapper & ::outer-wrapper 
(feature)'](https://lists.w3.org/Archives/Public/www-style/2014Dec/0014.html).

Example
--------

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

Use decorators
=========

Idea
----

Introduce an `@decorator` at-rule defining decorative elements, which 
can then be applied via a `decorator` property.

@FremyCompany [mentioned this in '[css4-pseudo] The need for more 
powerful pseudo 
elements'](https://lists.w3.org/Archives/Public/www-style/2013Apr/0704.html),
 which was obviously inspired by an [old version of the Web Components
 
spec](https://www.w3.org/TR/2013/WD-components-intro-20130606/#decorator-section).

Example
--------

```css
@decorator video {
  content: contents slot(icon) slot(text);
  @slot(icon) { content: ' V'; font-family: ...; }
  @slot(text) { content: ' video'; }
}

@decorator fog {
  content: slot(wrapper);
  @slot(wrapper) {
    content: contents slot(overlay);
    position: relative;
  }
  @slot(overlay) {
    position: absolute; top...;
    background: rgba(...);
  }
}

@decorator only-first-image {
  content: contents(img:first-of-type);
}
```

Use a pseudo-class
============

Idea
----

Introduce a `:body` pseudo-class matching all non-heading elements.

This is obviously restricted to some specific use case and was 
[proposed by Leif Halvard Silli in 'A *:body pseudo 
class'](https://lists.w3.org/Archives/Public/www-style/2014Jan/0621.html).

He didn't provide a proper example of how he imagined the pseudo-class
 to work, though as [he's talking about something that "encapsulates 
the entire "body 
text""](https://lists.w3.org/Archives/Public/www-style/2014Jan/0624.html),
 I assume he mixed up the use cases of pseudo-classes and 
pseudo-elements.

Sebastian

-- 
GitHub Notification of comment by SebastianZ
Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/588#issuecomment-254488286 
using your GitHub account

Received on Tuesday, 18 October 2016 12:08:52 UTC