[css4-pseudo] multiple and nested pseudo-element ordering

Hi,

In my current work I have the following use case, which I think is 
pertinent to the Pseudo-element Level 4 discussion.

I typically have a list of headlines (newspaper website), each having a 
group of data attributes that I'd like to use to add content after the 
headline.  I'd like to be able to apply these selectors without having 
to worry about how many other data attribute selectors exist.

For example:

<h3 class="headline" data-content-level="premium" 
data-content-type="video">Stock Prices Climb</h3>

..headline[data-content-level="premium"]::after(1) {
   content: "P";
   font-family: Icon Font;
}

..headline[data-content-level="premium"]::after(2) {
   content: "premium";
   font-family: arial;
}

..headline[data-content-type="video"]::after(1) {
   content: "V";
   font-family: Icon Font;
}

..headline[data-content-type="video"]::after(2) {
   content: "video";
   font-family: arial;
}

Essentially, I'd *expect* that to output `Stock Prices Climb P premium V 
video` with the icon fonts applied.  However, I have two pseudo-elements 
of ordinal "1" and two of ordinal "2" so an implementation may want to 
output `Stock Prices Climb P V premium video`.  Perhaps, this should be 
overcome by changing the selectors to

..headline[data-content-level="premium"]::after(1)
..headline[data-content-level="premium"]::after(2)
..headline[data-content-type="video"]::after(3)
..headline[data-content-type="video"]::after(4)

The problem arises when I want to add an additional pseudo-element in 
potentially a different style sheet, because maybe I don't know what 
index to pick up at.  Should we just say that's up to the developer to 
know?  I have this feeling that it'd be nice to say that different 
selectors that have identical ordinals should try to group by selector 
(then ordinal), but that could quickly become an implementation nightmare.

It'd also be nice if we could group the selectors like:

..headline[data-content-level="premium"]::after /* Icon */
..headline[data-content-level="premium"]::after::after  /* Text */
..headline[data-content-type="video"] ::after /* Icon */
..headline[data-content-type="video"] ::after::after /* Text */

That way the text would always be displayed as a pseudo-element of the 
icon, and the icons could be displayed in whatever order the user-agent 
decided to.  There's no discussion of nested pseudo-elements in the 
unofficial draft, but I would strongly recommend that implementations 
provide at least 2 levels of ::after and ::before.  This is, 
..class::before(n)::after(n) must be supported, but 
..class::before(n)::after(n)::before would be optional.

Thoughts & feedback would be much appreciated.

Sam L'ecuyer

Received on Wednesday, 24 April 2013 12:55:24 UTC