Why doesn’t nth-child, first-child, blah-child target the child element(s)?

[nikolai]

Why aren’t they called nth-element, first-element, blah-element? Wouldn’t a person normally assume if you’re asking for div:nth-child(2) you’d be looking for the second child of div? Instead I have to go div>:nth-child(2) – I know, not really inconvenient, but imho it’s not really intuitive?

[joshuanhibbert]

Taken from the W3C (http://www.w3.org/TR/selectors/#nth-child-pseudo):

The :nth-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings before it in the document tree, for any positive integer or zero value of n, and has a parent element.

[Meta_Ing]

The way selectors work is that they select whatever element they are attached to given a certain condition. For example, a:hover selects any a element which is currently being hovered over. While this example may seem trivial, knowing the concept should help you realize that :nth-child(…) actually represents any element that is the nth child of its parent, rather than selecting the nth child of that element.

As for your example (although I’m sure you’ve already figured this out), div:nth-child(2) represents a div element which is the 2nd child of its parent, while div>:nth-child(2) represents any element that is the 2nd child of a div element which happens to be the immediate parent.

[nikolai]

Josh: Thanks for not reading my post. Did you at any point not recognise I knew exactly how the selectors should be used? And how does your super-helpful quote from wc3 answer anything I asked? Please read the question before answering in the future.

Meta: So you’re saying it’s because all those elements which are potentially matched are children of it’s parent? Why is that more intuitive than saying nth-sibling? (and when is there ever an element which isn’t a child of it’s parent for that matter?

[Meta_Ing]

I honestly can’t really say why the selectors are called *-child rather than *-sibling or *-element, but it’s probably just like you said: because they have a parent – and as a result, are children.

Given proper markup, the only element that doesn’t contain a parent is the HTML element. Everything else of course is a child of the HTML element in some way.

[joshuanhibbert]

@nikolai Apologies for being so brief, I was rushing out to lunch but still thought that I would attempt to help. It appears as though I have made you upset, this was not my intention. I can assure you that I did read your question.

The W3C terminology can be confusing, but luckily @Meta_Ing translated the W3C quote using layman’s terms (as I would have done if I had the time, but my stomach was grumbing!).

The way that it is currently set up (or worded) allows you to choose how to use it, rather than forcing a single method upon you. .child:nth-child(odd) works via the child, whereas .parent :nth-child(odd) (note the space) works via the parent. This wouldn’t work too well if it was called nth-sibling. Here is an example that illustrates what I mean: http://jsfiddle.net/joshnh/Jwugr/

I think another way to look at it is like this: using the term child makes it fairly clear that the scope is limited to the parent element. This allows you to use the pseudo-class as often as you like, all over the place. If for instance you had first-element, how would that make sense as anything other than the html tag?

[nikolai]

Meta, many thanks. Will continue to ponder.

Josh, you’re kind of answering a question I’m not asking, or you don’t know the answer. IMO child does not make it clear that you’re talking about a child of the parent, if that were the case it should be called :nth-child-of-parent (can you think of a better word for that? Sibling perhaps?)

In regards to your “(note the space)” comment, I don’t know where to begin explaining to you how wrong that is… Perhaps I’d start by saying we’re talking about the children elements, not all ancestors…

[Senff]

It’s not really intuitive indeed, but I’m not sure if the Powers That Be aimed for that in the first place.

Another example….. Where p:first-letter means “the first letter of the p element”, it’s different for p:first-child which obviously doesn’t mean “the first child of the p element” but “the p element that IS the first child”.

Obviously, that’s the difference between pseudo-classes and pseudo-elements, but since it’s written the same way (the semicolon), I agree that it can lead to some confusion. And so I guess that’s the same with the parents/ancestors/children…..there’s probably a good reason why it’s not as intuitive as it is, but ah. That’s the way it is, I guess.

Hope this answer doesn’t upset you in any way. Wouldn’t hurt to be a little nicer to @Joshuanhibbert, though.

[joshuanhibbert]

@nikolai I must admit, I cannot understand the confusion that you are having, and as such am having difficulty answering your question. With that said, it would be nice if you could be a little more polite, after all, I am taking the time to try to help you.

I personally disagree that child-of-parent would be better than simply using child; a child must have a parent to exist.

In regards to your last sentence (and my example), there is nothing wrong with that at all. In fact, that is how CSS is designed. If you want to target only direct descendants, then feel free to use the direct descendant selector. I would like to hear why you believe that is so wrong though, perhaps I have been incorrect all this time.

[nikolai]

Haha, cheers Senff! That does offer some insight. Wasn’t really trying to be mean to Josh, just getting the point across that had he read the question, it’d be clear I knew exactly how to use the selector. Copy/pasting a slab from wc3 was IMO quite rude, so I responded in kind.

[nikolai]

Josh, best we let it go mate. Meta & Senff understood perfectly. You didn’t. Live with it and move on with life.

[joshuanhibbert]

@nikolai Fair enough. I personally felt that it would be ruder not to do anything after reading your question, but as I was quite hungry I just pasted that quote in and left it at that. I never actually thought you didn’t understand how pseudo-classes worked, I just hoped that the quote would explain the parent/child relationship. Obviously this lack of communication was my fault, and as I have already done, I apologize for any insult that you might have felt, it was certainly not intended.

On a broader note, when dealing with people on the internet, responding in kind is almost never a good idea.

[nikolai]

In relation to my comments regarding using a space between the class and the pseudo selector (e.g. .something :nth-child(1)) – I shouldn’t have said wrong, just that this would target the first child of all elements under .something. That’s why I think it’s not particularly useful, albeit valid. In my case, let’s say I want to target the first child element of .something, not the first child element of everything else under .something. This is why I used the .something>:nth-child(3) example.
I guess my point is, *-child doesn’t actually have anything to do with the children of the element you’ve prefixed it with, to do that we need a something like ” ” or “>”. That’s why I was asking if there was some deeper meaning to the choice of name for *-child pseudo selectors. As far as I can tell nth-child(3) for example would be better named simply as nth(3), because it’s getting the nth of that element. The fact they are children, appears irrelevant.

[Meta_Ing]

As far as I can tell nth-child(3) for example would be better named simply as nth(3), because it’s getting the nth of that element. The fact they are children, appears irrelevant.

I feel like this would create confusion with the *-of-type selectors, which select the first, last, or nth specified element(s) – regardless of their position.

Edit – I’m pretty sure you understand the concept, so I’ll retract the examples.

I think the best way to answer your question is that the term child suggests that you want to select an element if it’s that child, while terms like nth, first, or last might imply that you want to select that instance of the element.

[Author]

Posts