Re: nth descendent selector

On Fri, Nov 9, 2012 at 9:24 PM, Dave Smith <da__smith@hotmail.com> wrote:
> Hi Lea and Brian
>
> Firstly thanks for the Selectors 4 reference. Somehow didn't have it on my
> radar, but now that it is I'm excited to sit down and have a good read
> through!
>
> If I've understood :nth-match correctly then I think it isn't quite what I'd
> be after.
>
> Using the case from before, :nth-match(1, h1) would select the first h1 in
> Document 1 and both h1s in Document 2 and 3 (hopefully I figured that out
> right, it's getting a bit late!). Whereas the outcome I would be after is to
> select only the first h1 in each document.
>
> I'm not sure any of the selectors can really do this as they work in a kind
> of recursive way, which can return any number of selected elements. Whereas
> I'm only after at most one element, and most likely just the first
> descendant. Maybe ":first-descendant" is more appropriate and all that would
> be needed.
>
> p.s. Lea, I like your contrast ratio app, really clear and colourful
>
> all the best
> Dave
>
> ________________________________
> Date: Fri, 9 Nov 2012 15:58:23 -0500
> From: bkardell@gmail.com
> To: lea@w3.org
> CC: da__smith@hotmail.com; www-style@w3.org
> Subject: Re: nth descendent selector
>
>
>
> Brian Kardell :: @bkardell :: hitchjs.com
> On Nov 9, 2012 3:16 PM, "Lea Verou" <lea@w3.org> wrote:
>>
>> Sounds like this would be solved by the :nth-match() pseudo-class [1] in
>> Selectors 4. Specifically, the selector in your example would be
>> li:nth-match(7 of li) or just :nth-match(7 of li).
>>
>> [1]: http://www.w3.org/TR/selectors4/#the-nth-match-pseudo
>>
>> Lea Verou
>> W3C developer relations
>> http://w3.org/people/all#lea ✿ http://lea.verou.me ✿ @leaverou
>>
>>
>>
>>
>>
> That would answer the use case given, but caution though it is also a
> sibling combinator and not an equivalent of the js he provided.
>
>>
>> On Nov 9, 2012, at 12:33, Dave Smith wrote:
>>
>>> Hi
>>>
>>>
>>> The :nth-of-type and similar selectors are really great but is there
>>> reason why we don't have a selector equivalent to
>>> document.getElementsByTagName?
>>>
>>>
>>> A selector like ":nth" that would only ever select zero or one element in
>>> comparison to :nth-of-type or similar which can select zero or more
>>> elements.
>>>
>>>
>>> For example
>>> li:nth(7)
>>> would be equivalent to document.getElementsByTagName('li')[6]
>>>
>>>
>>> I for one would find this useful in making my CSS more robust and easier
>>> to write, for example take this very rough and contrived scenario:
>>>
>>>
>>> Document 1:
>>> <h1></h1>
>>> <h1></h1>
>>>
>>>
>>> Document 2:
>>> <p></p>
>>> <div><h1></h1></div>
>>> <h1></h1>
>>>
>>>
>>> Document 3:
>>> <div> <div> <h1></h1> </div> </div>
>>> <h1></h1>
>>>
>>>
>>> In this example I want to ensure that the first h1 always has less of a
>>> margin above it (or conversely I want to ensure that any subsequent h1s have
>>> more of a margin above them) and importantly I have no control over the
>>> markup I'm receiving.
>>>
>>>
>>> There may be are other use-cases for a selector equivalent to
>>> document.getElementsByTagName.
>>>
>>>
>>> all the best
>>> Dave
>>
>>
>

Just to clarify that I understand -- it's more like what you are
asking for is more like:

document.querySelectorAll('li')[6]

Right? I'm not really sure it matters - it seems pretty hard to
optimize since a change anywhere in the document might have an impact
anywhere else in the document - selectors aren't so much like that.
If they are static documents you are talking about and you have the
ability to add css, I would assume you could have script too.  Why not
just do something like the code above to add an id to the element and
use CSS to style that?  If you have to support older browsers - jquery
actually does have an nth I think that is just what you are looking
for.

Received on Saturday, 10 November 2012 02:49:03 UTC