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

[Alan Gresley:] 
> On 19/03/2011 9:04 AM, fantasai wrote:
> > 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
> 
> 
> Really, CSS4? We have implementation of this already.
> 
> Sylvain, you the parts mixed up. Try this.
> 
> 
> <!DOCTYPE html>
> <style type="text/css">
> p { font-size: 200% }
> 
> p::first-letter {background: lime }
> 
> p:hover::first-letter  { background: red } p::first-letter:hover
> { background: orange }
> 
> p:hover::first-line  { background: aqua } p::first-line:hover
> { background: yellow } </style>
> 
> <p>Some text to fill this paragraph</p>

Not quite; p.hover::first-letter styles the first letter
when any part of the paragraph is hovered from its first to
its last line. What I want is style the first letter when 
*it* is hovered. I cannot do that today.

> 
> 
> Results:
> 
> IE9            first-letter = red
>                 first-line = aqua
> 
> Opera 11:      first-letter = red
>                 first-line = aqua
> 
> Safari 5.0.4   first-letter = red
> 
> FF 3.6.16:     first-letter = red
> 
> 
> I have not checked in FF4b.
> 
> 
> This is how I expected it to work. Here is a demo from a few months ago.
> 
> <http://css-class.com/test/css/3/expanding-tabs-with-transition.htm>
> 
> 
> Second example has this CSS,
> 
> .content1 a:hover:after,
> .content1 a:focus:after {
>    width: 100%;
> }
> 
> to expand the generated content on :hover. All browsers expand the
> generated content instantaneously where FF4b expands it as a true
> transition.
> 
> 
> I don't think we should change current implemented behavior which is.
> 
> E:hover::first-letter
> E:hover::first-line
> E:hover::before
> E:hover::after
> 
> 
> 
> 
> --
> Alan http://css-class.com/
> 
> Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo

Received on Tuesday, 29 March 2011 15:40:54 UTC