W3C home > Mailing lists > Public > www-style@w3.org > October 2011

Re: Selecting the parent of an element

From: Brian Kardell <bkardell@gmail.com>
Date: Fri, 7 Oct 2011 10:01:36 -0400
Message-ID: <CADC=+jdrvtxC6Wg64w+O-1FEvEYdAFrQLgOfb=Gz64Yc7W6zXA@mail.gmail.com>
To: Rudolph Gottesheim <r.gottesheim@loot.at>
Cc: Řyvind Stenhaug <oyvinds@opera.com>, www-style@w3.org
I expected that the following would work:

.form-row:focus{...}

I have to admit that it threw me for a loop because I have never tried it
and when I did I was surprised to see that it didn't since it is part of the
action pseudo classes along with hover and active both of which will work
because your child being hovered/active means that you are too... Can
someone explain why focus is different?  Am I missing something in the spec
that would indicate that difference?

-Brian



On Fri, Oct 7, 2011 at 9:36 AM, Rudolph Gottesheim <r.gottesheim@loot.at>wrote:

> I haven't looked into Selectors 4 yet and so I didn't know about
> :matches(). Looking at the current spec, I doubt that that would do what I
> want.
>
> Here's a snippet to help illustrate my intention:
>
> <div class="form-row">
>        <label for="email">E-Mail</label>
>        <input type="email" name="email" id="email" />
> </div>
>
> I want to have a border/outline around the label AND the input element when
> the input is focused (which is quite a useful thing to do). With Selectors
> 3, there is no way to do that, as far as I know.
>
> Am 07.10.2011 15:21, schrieb Brian Kardell:
>
>> form =.form-row input:focus { outline: solid 1px #ccc; }
>>
>> Couldn't you write that as:
>>
>> form:matches(form .form-row input:focus) { outline: solid 1px #ccc; }
>>
>> On Oct 7, 2011 9:04 AM, "Řyvind Stenhaug" <oyvinds@opera.com
>> <mailto:oyvinds@opera.com>> wrote:
>>
>
>
Received on Friday, 7 October 2011 14:02:14 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:45 GMT