Проблема с nth-child

[advokatua]

Проблема с псевдоклассом nth-child.

Не могу понять каким образом он 3-ий "а" элемент воспринимает как 4-ый, а первого якобы вообще нету.

Получается так будто элемент header тоже входит в счет, но причем тут хедер если явно указано

 .categories a:nth-child(1)

?

55-ая строка CSS-ника

Песочница: http://cssdesk.com/qxEvw

Может кто подсказать или направить где конкретно почитать об таком странном поведении?

Edited October 11, 2013 by advokatua

[Zverushka]

C нуля считает. 3 значит 4.

[advokatua]

ничего подобного, элементов "а" 3, чтобы выбрать последний 3-ий надо набрать

.categories a:nth-child(4) {

В этом и казус, не могу его понять, почему он считает всю ветку, а не только одни ссылки.

если бы с 0 считалось, то надо было бы набрать:

.categories a:nth-child(2) {

Не работает даже если лишнее почистить

http://cssdesk.com/qxEvw

Фактически header висит будто еще один элемент "а"

Edited October 11, 2013 by advokatua

[Zverushka]

А, и точно не с нуля считает.

Так он считает любой тег по порядку, а не только a, nth-of-type вам нужен.

[advokatua]

Дык блин, это я уже догадался, тогда почему он вообще работает, там ведь указана "а" в селекторе

.categories a:nth-child(4) {

Само описание псевдо класса:

Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.

[Catherine]

C нуля считает. 3 значит 4.

С 1 считает http://htmlbook.ru/css/nth-child

тогда почему он вообще работает, там ведь указана "а" в селекторе

categories a:nth-child(4) 

nth-child работает следующим образом:

Выбирает у родителя (в данном случае у .categories) все дочерние элементы с определенным порядковым номером (1 - header; 2, 3, 4 - а), проверяет, является ли этот элемент ссылкой, и если да, то применяет к этому элементу прописанные стили. Принцип работы :nth-child можно посмотреть на следующем примере.

Если нужна вторая дочерняя ссылка, встречающаяся у родителя, неважно с каким порядковым номером, то используйте :nth-of-type. Независимо от того, сколько других элементов будет между двумя ссылками и перед ними, a:nth-of-type(2), к примеру, применит стили только ко 2 встретившейся ссылке (пример).

Про различия между :nth-child и :nth-of-type можно почитать в этой статье http://habrahabr.ru/post/119139/

Почитать о поведении этих псевдоклассов можно в спецификации: nth-child, nth-of-child

[advokatua]

спасибо, разобрались.

Closed.

[npofopr]

Самый крутой пример http://nthmaster.com