Почему так работает before в nth-child(1)?

Question

[Ingernirated]

Всем привет!
Почему, если поставить значение nth-child(1), то ничего не произойдёт, а если 2, то он сработает на первый элемент класса, по какой логике он так делает?
https://jsfiddle.net/ha0skq6c/

Answer 1

[Виталий Киренков]

Потому что первым элементом в потоке является H1, и по факту ваш первый bro, является вторым элементом. Оберните, например, ваши p.bro в div, и всё будет работать корректно.

Comments

[Ingernirated]

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

Answer 2

[Виталий Першин]

На вашем примере логика простая:
- Элемент должен быть первым
- Элемент должен иметь указанный класс bro

Вот так должно быть более понятно


Иными словами учитываются все элементы уровня, но свойства применяются если у элемента имеется указанный класс

Comments

[Ingernirated]

но я же его применял не ко всем элементам, а только к элементам определенного класса
почему он начинает поиск с начала строки вообще, а не с начала элементов данного класса?
или это формальность, что я указываю определенный класс, что вообще могу обратиться и к h1 и просто написать 2?

[Виталий Першин]

Ingernirated, с nth-child немного не так, он не считает классы, это можно сказать условие т.е. если элемент 3-й и соответствует классу, то применяем стили...

Answer 3

[archelon]

используйте nth-of-type вместо nth-child

Comments

[Ingernirated]

спасибо!