Why does :nth-child() iterate from one instead of zero?
As shown in this example. Why does it select the first element and not the second when
p :nth-child(1)
-
33"Should array indices start at 0 or 1? My compromise of 0.5 was rejected without, I thought, proper consideration." -- Stan Kelly-Bootle– Mason WheelerCommented Apr 2, 2016 at 10:10
-
2Since I suspect this will draw a few close votes, I am leaving this open because it is at least theoretically possible to answer this objectively by either citing other examples of 1-indexing in CSS and claiming consistency, or finding a relevant statement from one of the people who actually makes CSS standards decision. I don't know nearly enough about CSS to do that myself, but as long as we don't upvote any answers that make the obvious "it's how normal humans count" argument without any justification for why everything else is 0-indexed, then there's no harm in leaving this open.– IxrecCommented Apr 2, 2016 at 14:06
-
4@lxrec: I think it is a claim that "everything else is 0-indexed" which should be justified. You don't say Queen Elizabeth the Zeroth, The zeroth day of Christmas, the zeroth street to the left or the zeroth word on the page.– JacquesBCommented Apr 2, 2016 at 16:05
-
@lxrec In my answer XPath is cited as a precedent for 1-based indexing. Not sure if it actually was a factor, or just a coincidence, but it's another XML focused system so it makes sense.– user949300Commented Oct 17, 2017 at 4:26
Add a comment
|
3 Answers
CSS uses ordinal numbering when identifying elements in an ordered collection. For example, :first-child matches the first child element of a parent, @page :first matches the first page, ::first-line matches the first line in a block, and ::first-letter matches the first letter of the first line of a block.
The :nth-child() pseudo-class is a generalization of the :first-child selector, where you read n as the provided number. So :nth-child(1) means 1st child or first child,:nth-child(2) means 2nd child, and so forth.
So it is natural that :nth-child(1) selects the first child, and it would be highly confusing and illogical if it selected the second child!
CSS uses ordinal numbering because this is how humans naturally talk about such elements. You say the first paragraph of a text, not the zeroth paragraph or paragraph-zero.
The reason you even ask the question is probably because you are a programmer, and many programming languages index array and list items from 0. The reason for this is that in low level languages like C, an array is really a pointer to the memory address of the first item and the index is an offset relative to this pointer. So array[0] means address of first item, array[1] means address of the first item plus the size of 1 item, i.e. second item and so on.
Many higher-level languages which do not support pointer arithmetic directly have retained the 0-based indexing for consistency and familiarity. For example, all languages with C-derived syntax - including JavaScript, even though arrays in JavaScript are implemented in a completely different way. But this is not at all universal - languages like COBOL, Fortran, Lua, Julia and some Basic's use 1-based indexing. (Visual Basic naturally chose the worst of both worlds by making it configurable.) So it is definitely not like every other language use 0-based indexing. For what it's worth, XPath and XQuery also use 1-based indexing.
While most programmers will be familiar with both 1 and 0-based indexing, normal people will naturally count from 1, and CSS is a language designed not just for programmers but for designers and graphic professionals, so it is natural to choose 1-based indexing.
-
6
-
4@gnat: Would you say my comment here is the first in the thread - because yours is the zeroeth? Humans don't count like that, and CSS is designed for humans, not computer scientists :)– JacquesBCommented Apr 2, 2016 at 10:45
-
4it would help if your answer mention that you believe CSS is primarily intended for use by non-programmers (preferably backed up somehow)– gnatCommented Apr 2, 2016 at 10:48
-
4@gnat Is there anywhere in programming any item where a child is said to be the zeroth? Since the selector is nth-child its logical to start from first. Commented Apr 2, 2016 at 15:22
-
6I don't disagree with your answer, but many things that we count don't start at 1. You are 0 years old for the first year of your life - you don't start out at 1. The day doesn't start at 1:00 a.m. - it starts at 0:00 a.m. When I measure the distance traveled from my house, I start at zero. Counting from zero is just as natural for human beings as counting from one - it depends on the context, although you are right that we would never speak of our zeroeth child :) Commented Apr 2, 2016 at 20:52
From the CSS Level 3 Selector Specification:
6.6.5.2. :nth-child() pseudo-class
The
:nth-child(an+b)pseudo-class notation represents an element that hasan+b-1siblings before it in the document tree, for any positive integer or zero value ofn, and has a parent element. For values ofaandbgreater than zero, this effectively divides the element's children into groups ofaelements (the last group taking the remainder), and selecting thebth element of each group. For example, this allows the selectors to address every other row in a table, and could be used to alternate the color of paragraph text in a cycle of four. Theaandbvalues must be integers (positive, negative, or zero). The index of the first child of an element is 1.
It goes into a lot more detail with examples. It appears to be that the final calculation of an+b must total to a positive number.
When
a=0, the an part need not be included (unless thebpart is already omitted). Whenanis not included andbis non-negative, the + sign beforeb(when allowed) may also be omitted. In this case the syntax simplifies to:nth-child(b).If both
aandbare equal to zero, the pseudo-class represents no element in the document tree.
Additional formatting in the last paragraph is mine to add emphasis.
answered Apr 3, 2016 at 18:59
Probably for consistency with XPath, another XML / HTML processing language. Which begs the question, why does XPath use 1 based indexing?
See https://stackoverflow.com/questions/3319341/why-do-indexes-in-xpath-start-with-1-and-not-0
The relevant (but controversial quote) is:
"...1-based logic was the right choice for XPath and XSLT...because the language was designed for users, not for programmers, and users still have this old-fashioned habit of referring to the first chapter in a book as Chapter One..."
answered Oct 16, 2017 at 23:37
