CSS Selectors: How to style non-styleable?

There are situations when we need to define styles
of sub-elements of some DOM element. 
Such sub-elements are not parts of the DOM so exsting selectors
cannot be applicable to them.

Examples: 
- style of scrollbars of some element and their parts.
- parts of <select> element: buttons, popups, etc.

Question is: what is the best method to define sub-elements
in CSS Selectors? I understand that this question about future 
extensions/directions of CSS Selectors rather than 
existing mechanisms.

My first attempt was to use pseudo-elements 
for definition of e.g. scrollbar parts: 
element : scrollbar-step-minus { ... }
element : scrollbar-step-minus : hover { ... }
element : scrollbar-step-minus : active { ... }
element : scrollbar-step-plus { ... }
...
element : scrollbar-page-minus { ... }
...
(all 15 declaration)

Problems with this: 
1) this system of styles must be interpreted as single block of styles - 
they shall be applied all or none.
2) such declarations "pollute" set of styles of the document - 
CSS Selectors is a flat table so adding there significant amount 
of separate elements which will be used only as an aggregate seems
like technically wrong. 

The best candidate as far as I can see is to use at-rules for that:

@style-block my-vertical-scrollbar 
{
   scrollbar-step-minus { ... }
   scrollbar-step-minus : hover { ... }
   scrollbar-step-minus : active { ... }
   scrollbar-step-plus { ... }
   ....
}

But I am not sure of how assignment of such blocks should be done 
in grammar:

I would like to see something like this:

element { color:red; }
element:hover { color:blue; }
element:v-scrollbar = my-vertical-scrollbar; // note '=' sign

Any ideas here? 

Andrew Fedoniouk.
http://terrainformatica.com

Received on Friday, 10 March 2006 19:28:11 UTC