Re: Pseudo-selector for virtual elements

On Sat, Jul 10, 2010 at 3:09 PM, Andrés Sanhueza
<peroyomaslists@gmail.com> wrote:
> Hello. I want to share a proposal to CSS, which can't be done with the
> current specs as far as I'm aware.
>
> The HTML5 spec didn't added a <di> element to group <dt> and <dd>
> elements inside a <dl> because "that's an styling problem and should
> be solved with CSS". I agree mostly, but my main complain right now is
> that there's no current way to create a virtual surrounding element
> around existing elements. I think it should be neat, and would be a
> great way to stimulate the people to use lists when tables aren't
> really appropriate (as layout—they are always good for tabular data).
>
> Example: I want to have an image gallery so the normal code would be
> something like:
>
> <ul>
> <li><figure><img src="" alt=""><figcaption></figcaption></figure></li>
> <li><figure><img src="" alt=""><figcaption></figcaption></figure></li>
> <li><figure><img src="" alt=""><figcaption></figcaption></figure></li>
> <li><figure><img src="" alt=""><figcaption></figcaption></figure></li>
> <li><figure><img src="" alt=""><figcaption></figcaption></figure></li>
> <li><figure><img src="" alt=""><figcaption></figcaption></figure></li>
> <li><figure><img src="" alt=""><figcaption></figcaption></figure></li>
> </ul>
>
> The problem is that one would want that it displays more like a table,
> like to make that all the "cells" in a a row share the same height
> depending of the content instead of a fixed one. There's currently no
> way to group <li> elements inside an <ul> without breaking the
> validation, and most people resort to doing separate list per row—or
> worse, several one-element list inside a div. something like a
> pseudo-selector to select an imaginary tag surrounding an arbitrary
> group of tags would be great.
>
> Something like (just referential code)
> ul (li+li+li):outside { display: table-row;}
> ul (li*3):outside { display: block;}
> dl (dt+dl):outside { display: block;}
>
> Which will be the equivalent of doing
>
> <ul>
> <rowelement style="display: block;">
> <li><li><li>
> </rowelement>
> <rowelement style="display: block;">
> <li><li><li>
> </rowelement>
> </ul>
>
> <dl>
> <rowelement style="display: block;">
> <dt></dd>
> </rowelement>
> <rowelement style="display: block;">
> <dt><dl>
> </rowelement>
> </dl>
>
> Only without the made-up tag.
>
> And something to create an element inside an element would be great
> too, as to replace some usage of <span> tags
>
> dl dt:inside { z-index: 2 }
>
> Which replace writing something like
>
> <dl>
> <dt><inlineelement style="z-index: 2;"></inlineelement></dt><dd></dd>
> </dl>

I also like the general shape of this idea.  I've previously suggested
this in another form - the ::wrap() pseudoclass takes two selectors as
arguments, and inserts a start pseudo-tag just before an element
matched by the first selector, and an end pseudo-tag just before a
following sibling that is matched by the second selector.

So, to wrap your dt/dds with a pseudoelement, you'd use ::wrap(dt,
dd+dt).  To wrap every third <li>, you'd do ::wrap(li:nth-child(3n+1),
li:nth-child(3n+1)).

If no following sibling is matched by the second selector, the end
pseudo-tag is placed after the last sibling.  You can also just omit
the second selector entirely to automatically wrap everything
following.

The problem is dealing with overlaps.  For example, given this code:

<b>foo</b><i>bar</i><b>baz</b><i>qux</i>

And these selectors:

::wrap(b,b) { color: blue; }
::wrap(i,i) { color: red; }

What color is each word?

I haven't yet solved this problem in a way that makes me happy, unfortunately.

Further problems to ponder:

<b>foo</b><i>bar</i><b>baz</b>
::wrap(b,b) { color: blue; }
::wrap(i,b) { color: red; }

<b>foo<i>bar</i>baz</b>
::wrap(b) { color: blue; }
::wrap(i) { color: red; }

~TJ

Received on Sunday, 11 July 2010 04:28:50 UTC