W3C home > Mailing lists > Public > www-style@w3.org > July 2010

Pseudo-selector for virtual elements

From: Andrés Sanhueza <peroyomaslists@gmail.com>
Date: Sat, 10 Jul 2010 18:09:22 -0400
Message-ID: <AANLkTinygUwm71kojtlbui6udubfKi0gFGvAw3Q-3Nrh@mail.gmail.com>
To: www-style@w3.org
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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:29 GMT