RE: [css4-selectors] Allowing pseudo-classes on pseudo-elements

Fantasia,

We could declare that #grid::grid-cell("nav"):hover is a valid selector in our draft, but it doesn't feel particularly core the grid.  Also, as a scenario, I'm not sure the conditional styling of a grid-cell or template layout slot is super-compelling.  I would prefer to discuss the applicability of pseudo-classes to pseudo-elements in the context of controls.

Here's a couple of scenarios:

1. A range control where transitions and transforms are used to scale the thumb part of a range control when it is pressed so the thumb may remain visible under the user's finger.
2. A search control which has a search button that "pulses" when it is focused, but not when it is active.

FWIW, markup similar to what is shown below in Example 1 actually works today in Chrome.

Could you give me some guidance as to where and when an extension like this is best discussed?

Thanks for your help, Phil

Example #1
input[type=range]::thumb {
	transition-property:transform;
	transition-duration:1s;
}

/* change CSS grammar to make :active after ::range-thumb valid */ 
input[type=range]::range-thumb:active {
	/* grow the thumb when it is pressed so it can be */
	/* seen under a finger */
	transform:scale(2);
}

Example #2
@keyframes pulse {
	from {
		border-color: rgba(0,0,255,1);
	}
	to {
		border-color: rgba(0,0,255,0.5);
	}
}
 
/* apply effects to search button, change grammar to */
/* make :focus:not(:active) valid after the fictional */
/* functional_pseudo ::action(IDENT) */
input[type=search]::action(search):focus:not(:active) {
	/* when focused but not actively pressed */
	/* apply a subtle 'pulse' effect */
	animation-name: pulse;
	animation-iteration-count: infinite;
	animation-duration: 1s;
}

-----Original Message-----
From: www-style-request@w3.org [mailto:www-style-request@w3.org] On Behalf Of fantasai
Sent: Friday, March 18, 2011 3:04 PM
To: Sylvain Galineau
Cc: www-style@w3.org
Subject: Re: [css4-selectors] Allowing pseudo-classes on pseudo-elements

On 03/09/2011 04:34 PM, Sylvain Galineau wrote:
> 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.

Current selector syntax isn't necessarily future selector syntax, and if you are defining new selectors in your draft you can define appropriate syntax there.

This is, btw, most definitely not a css3-selectors issue. If anything it's a css4-selectors issue. :)

~fantasai

Received on Saturday, 26 March 2011 09:11:44 UTC