Por que: nth-child () em CSS começa em 1 em vez de 0?


15

Por que: nth-child () itera de um em vez de zero?

Como mostrado neste exemplo . Por que ele seleciona o primeiro elemento e não o segundo quando

p :nth-child(1)

12
"Os índices de matriz devem começar em 0 ou 1? Meu compromisso de 0,5 foi rejeitado sem, pensei, consideração adequada." - Stan Kelly-Bootle
Mason Wheeler

1
Como suspeito que isso atrairá alguns votos íntimos, deixo isso em aberto, porque é pelo menos teoricamente possível responder isso objetivamente citando outros exemplos de indexação 1 em CSS e reivindicando consistência ou encontrando uma declaração relevante de um dos as pessoas que realmente tomam a decisão dos padrões CSS. Eu não sei quase o suficiente sobre CSS para fazer isso sozinho, mas contanto que não votemos em nenhuma resposta que torne óbvio o argumento "é como os humanos normais contam" sem nenhuma justificativa para o porquê de todo o resto ser indexado com zero, não há mal nenhum em deixar isso aberto.
Ixrec

1
@lxrec: Eu acho que é uma alegação de que "todo o resto é indexado em 0", o que deve ser justificado. Você não diz a rainha Elizabeth, a Zeroth, o dia zero do Natal, a rua zero à esquerda ou a palavra zero na página.
JacquesB

@lxrec Na minha resposta, XPath é citado como um precedente para a indexação baseada em 1. Não tenho certeza se realmente foi um fator ou apenas uma coincidência, mas é outro sistema focado em XML, pelo que faz sentido.
user949300

Respostas:


15

Se você contar seus próprios filhos, diria "meu primeiro filho", "meu segundo filho" e assim por diante, não "meu filho zeroth". É assim que os humanos contam. (Nota: esta não é uma opinião subjetiva minha. É literalmente como os números ordinais funcionam.)

O motivo pelo qual você faz a pergunta é provavelmente porque você é um programador, e muitas linguagens de programação indexam itens de matriz e lista de 0. O motivo é que, em linguagens de baixo nível como C, uma matriz é realmente um ponteiro para o endereço de memória do primeiro item e o índice é um deslocamento em relação a esse ponteiro. Então array[0]significa endereço do primeiro item, array[1]significa endereço do primeiro item mais o tamanho de 1 item, ou seja, o segundo item e assim por diante.

Muitos idiomas de nível superior que não oferecem suporte à aritmética de ponteiros mantiveram a indexação baseada em 0 para consistência e familiaridade. Por exemplo, todos os idiomas com sintaxe derivada de C - incluindo JavaScript, mesmo que as matrizes em JavaScript sejam implementadas de uma maneira completamente diferente. Mas isso não é universal - linguagens como COBOL, Fortran, Lua e alguns do Basic usam indexação baseada em 1. (O Visual Basic naturalmente escolheu o pior dos dois mundos, tornando-o configurável.) Portanto, definitivamente não é como todos os outros idiomas que usam indexação baseada em 0. Quanto vale, XPath e XQuery também usam indexação baseada em 1.

Embora a maioria dos programadores esteja familiarizada com a indexação baseada em 1 e 0, as pessoas normais contam naturalmente a partir de 1, e o CSS é uma linguagem projetada não apenas para programadores, mas também para designers e profissionais gráficos, por isso é natural escolher a indexação baseada em 1. .



1
seria bom se responder a sua menção que você acredita que CSS é destinado principalmente para uso por não-programadores (de preferência apoiada de alguma forma)
mosquito

1
@gnat Existe algum lugar na programação de algum item em que se diz que uma criança é zeroth? Como o seletor é o enésimo filho, é lógico começar primeiro.
Sami Kuhmonen 02/04

1
Você pode excluir tudo, exceto o último parágrafo? Tudo o resto é de conhecimento comum sobre este SE. "Enquanto a maioria dos programadores ...... natural escolher indexação baseada em 1"
0fnt

2
Não discordo da sua resposta, mas muitas coisas que contamos não começam no 1. Você tem 0 anos no primeiro ano de sua vida - você não começa no 1. O dia não começa às 01:00 - começa às 00:00 Quando medo a distância percorrida de minha casa, começo em zero. Contando a partir de zero é tão natural para os seres humanos como contagem de um - que depende do contexto, embora você está certo de que nunca iria falar do nosso filho zeroeth :)
Aaron Rasmussen

6

Na especificação do seletor de nível 3 do CSS :

6.6.5.2 : pseudo classe nth-child ()

A :nth-child(an+b)notação de pseudo-classe representa um elemento que possui an+b-1irmãos à frente na árvore de documentos, para qualquer número inteiro positivo ou valor zero igual a n, e possui um elemento pai. Para valores de ae bsuperior a zero, este divide eficazmente as crianças do elemento em grupos de aelementos (o último grupo restante tomando a), e seleccionando o belemento po de cada grupo. Por exemplo, isso permite que os seletores tratem todas as outras linhas de uma tabela e podem ser usados ​​para alternar a cor do texto do parágrafo em um ciclo de quatro. Os valores ae bdevem ser números inteiros (positivo, negativo ou zero). O índice do primeiro filho de um elemento é 1.

Ele entra em muito mais detalhes com exemplos. Parece que o cálculo final de an+bdeve totalizar um número positivo.

Quando a= 0, a peça a não precisa ser incluída (a menos que a bpeça já esteja omitida). Quando annão está incluído e bnão é negativo, o sinal + antes b(quando permitido) também pode ser omitido. Nesse caso, a sintaxe simplifica para :nth-child(b).

Se ambos ae bforem iguais a zero, a pseudo-classe não representa nenhum elemento na árvore de documentos.

Formatação adicional no último parágrafo é minha para adicionar ênfase.


0

Provavelmente por consistência com o XPath, outra linguagem de processamento XML / HTML. O que sugere a pergunta: por que o XPath usa a indexação baseada em 1?

Consulte /programming/3319341/why-do-indexes-in-xpath-start-with-1-and-not-0

A relevante (mas controversa citação) é:

"... a lógica baseada em 1 foi a escolha certa para XPath e XSLT ... porque a linguagem foi projetada para usuários, não para programadores, e os usuários ainda têm esse hábito antiquado de se referir ao primeiro capítulo de um livro como Capítulo um..."

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.