Re: Selecting Preceding Elements

On Tue, Sep 28, 2010 at 5:38 AM, Nathan Hammond
<w3.org@nathanhammond.com> wrote:
> PREAMBLE (to CSS feature request)
> I just spent the past little bit racking my brain... I believe that it
> is actually impossible to design CSS where elements earlier in the
> document tree are responsive to elements after them. With that
> realization I'm starting to think that this is an intentional design
> decision--if that's the case then all I'm looking for in response to
> this email is confirmation. Sure, I might complain a little bit (it's
> a bit limiting! :), but I can see it getting complicated to implement
> in terms of applying styles and only needing to parse the document in
> one direction.
>
> In any case, the use case I have is to design CSS that is responsive
> (on both sides) to the :target pseudo-class.
>
> Take this selector for example:
> ul > li:target + li + li
>
> This selects the second list item following the focused list item.
> Because the selected element is *after* :target, we can make it
> responsive to the change in :target. However, we have no way to modify
> elements preceding the :target in the document order...
>
> Making up a selector that doesn't work:
> ul > li:not(li:target):not(li:target~li):nth-last-child(1)
>
> This mythical selector that abuses existing pseudo-classes in ways
> they don't actually work would:
> 1. Grab all the list items of the unordered list,
> 2. Remove from the set the targeted list item,
> 3. Remove from the set all list items that follow the targeted list item, and
> 4. Finally select the element that appears last in the remaining set.
>
> The result of this magical selector would be the list item immediately
> preceding the targeted list item which could then be styled
> conditional to :target, achieving my goal.
>
> Thoughts? Reasons this can't be done? Things I missed entirely?

Rather than type out the reasons why it can't currently be done
myself, I'll let Jonathan Snook do the honors:
<http://snook.ca/archives/html_and_css/css-parent-selectors>.

(The same reasoning that applies to parent selectors applies to
previous sibling selectors.)

I'll happily answer any additional questions you may have or provide
further clarification, of course.

~TJ

Received on Thursday, 28 October 2010 14:16:54 UTC