W3C home > Mailing lists > Public > www-style@w3.org > November 2012

RE: nth descendent selector

From: Dave Smith <da__smith@hotmail.com>
Date: Sat, 10 Nov 2012 02:24:13 +0000
Message-ID: <DUB002-W4277624DC801E66F3ADFAEA16F0@phx.gbl>
To: Brian Kardell <bkardell@gmail.com>, Lea Verou <lea@w3.org>
CC: "www-style@w3.org" <www-style@w3.org>



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 bestDave
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#leahttp://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

>

>



 		 	   		  
Received on Saturday, 10 November 2012 02:24:42 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:02 GMT