[css3-selectors] Allowing pseudo-classes on pseudo-elements

Current selector syntax does not allow a pseudo-class to qualify a pseudo-element i.e. E::first-line:hover will not match when the first line of E is hovered.

Working through our latest CSS3 Grid Alignment proposal [1], this means one couldn't do :

	#grid::grid-cell("nav"):hover {
		...
	}

One option would be to move the pseudo-class inside the functional part of the pseudo-element which - imo - looks unnatural i.e. the author would be writing something like #grid::grid-cell("nav" :hover) because the syntax disallows #grid::grid-cell("nav"):hover. 


Another possible use-case involves UI element fragments as defined in CSS3 UI; if one is able to select pseudo-elements inside a control, the ability to style them according to their state would be useful e.g.

	Input[type="text"]::value:focus {
		background-color:...
	}

One implementation does support this pattern for scrollbar pseudo-elements combined with :active, :hover and :disabled as well as a set of proprietary pseudo-classes [3].

I wanted to inquire as to the reasons for this limitation, as well as the possibility of lifting it in a future version of CSS Selectors.


[1] http://dev.w3.org/csswg/css3-grid-align/
[2] http://dev.w3.org/csswg/css3-ui/#pseudo-elements
[3] http://www.webkit.org/blog/363/styling-scrollbars/

Received on Thursday, 10 March 2011 00:35:25 UTC