Pseudo-selector for virtual elements

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>

—Andrés Sanhueza.

Received on Saturday, 10 July 2010 22:09:55 UTC