Two proposals: 1. Implement a new pseudo-class selector ::between, 2. Allow pseudo-class selectors to be recursive

[z***@zjz.name]

Sorry, the original post made some mistakes, in especial, I meant
pseudo-element selectors, not pseudo-class selectors. So please ignore
the original post, here is the edited proposals:

The expressions in this Email are not in a rigour language so I hope you
don't mind it.

The two proposals are:

1. Introduce a new pseudo element ::between. 2. Allow ::between,
::before and ::after selectors to be recursive.

Oftentimes, we encounter situations where it's not enough to just use
semantical elements to represent documents, so we have to end up writing
ugly hacking code like these:

Example 1
<article>
<div> <!-- non-semantical, for stylistic purpose -->
<section>
...
</section>
<section>
...
</section>
<section>
...
</section>
</div>
</article>

So I propose to introduce a new pesudo-element ::between. It generates a
pseudo element as if it was between ::before and ::after of an actual
element, and all the actual children of the element act as if they were
"moved down" to become the children of ::between. When it applies to the
<article> in Example 1, it serves the stylistic purpose as the <div>
does. With ::between, we can largely avoid non-semantical code.

Let me take the following document as an example:

Example 2
<parent>
<child1>...</child1>
<child2>...</child2>
<child3>...</child3>
</parent>

::before, ::after and ::between of the <parent> element act like this:

<parent>
<::before>
</::before>
<::between>
<child1>...</child1>
<child2>...</child2>
<child3>...</child3>
</::between>
<::after>
</::after>
</parent>

Unlike ::before and ::after which require |content|, the |content|
property is disregarded in ::between.

But that's not even enough, what if we encouter a worse situation
requiring more than one non-semantical layers? Consider the Example 3:

Example 3
<article>
<div> <!-- non-semantical, for stylistic purpose -->
<div> <!-- non-semantical, for stylistic purpose -->
<section>
...
</section>
<section>
...
</section>
<section>
...
</section>
</div>
</div>
</article>

We can only avoid one such layer by using ::between, since a
pesudo-element selector is not premitted to be recursively applied to
another pesudo element by the current standard, so I propose to allow
::before, ::after and ::between selectors to be recursive. So we can use
::between::between to avoid both the two non-semantical layers, and
actually, any amout of such layers. And also, we can use
::before::before, ::after::after, ::between::before, ::before::between,
etc.

With ::between and recursive ::before, ::after and ::between, we are
able to wipe out almost all kinds of non-semantical code in HTML code,
and finally make it history.

Thank you for your time of reading, and I am looking forward to hearing
opinions from you on on my proposals.

Zhang Junzhi

[Daniel Tan]

[Resending as I forgot to cc www-style]

Post by z***@zjz.name
Unlike ::before and ::after which require |content|, the |content|
property is disregarded in ::between.

So what determines whether or not a ::between is generated when no
::between rule is specified? Does its display property special-case
default to contents (note that its initial value is inline), effectively
making the display property a "required" property to change, as well as
making every element have a ::between pseudo-element (albeit one that
doesn't generate its own box by default)?

Post by z***@zjz.name
We can only avoid one such layer by using ::between, since a
pesudo-element selector is not premitted to be recursively applied to
another pesudo element by the current standard, so I propose to allow
::before, ::after and ::between selectors to be recursive. So we can use
::between::between to avoid both the two non-semantical layers, and
actually, any amout of such layers. And also, we can use
::before::before, ::after::after, ::between::before, ::before::between,
etc.
With ::between and recursive ::before, ::after and ::between, we are
able to wipe out almost all kinds of non-semantical code in HTML code,
and finally make it history.
Thank you for your time of reading, and I am looking forward to hearing
opinions from you on on my proposals.
Zhang Junzhi

Nesting/multiple ::before and ::after pseudo-elements was explored in
the old css3-content draft, but not for very long, and it was never
revisited in over a decade.

[Oriol _]

Some years ago I proposed the same idea in https://lists.w3.org/Archives/Public/www-style/2015Oct/0105.html

I have been refining it in https://github.com/Loirooriol/css-contents

As Daniel says, these new boxes shouldn't be inserted by default. An UA-origin `display: contents` can be used to address this.

Then the main problem is inheritance. It would be nice to set e.g. `color` in this pseudo-element, and let the children of the element inherit it.

But using the `inherit` keyword on a non-inherited property should continue getting the value from the parent element and not from the pseudo-element, which will probably have the initial value (unless `all: inherit` is added in UA origin).

I have filed https://github.com/w3c/csswg-drafts/issues/2406 if you want to discuss in github.

--Oriol

[Marat Tanalin]

Post by z***@zjz.name
So I propose to introduce a new pesudo-element ::between. It generates a
pseudo element as if it was between ::before and ::after of an actual
element, and all the actual children of the element act as if they were
"moved down" to become the children of ::between. When it applies to the
<article> in Example 1, it serves the stylistic purpose as the <div>
does. With ::between, we can largely avoid non-semantical code.

See a related discussion in the csswg-drafts GitHub repository:

https://github.com/w3c/csswg-drafts/issues/588

The discussion (started on 2016-10-11, latest comment added on 2018-01-19) contains information about several possible approaches to generating virtual containers via CSS.