Последовательность :nth-child

@sergei2210 · Регистрация: 07.04.2016

Студворк — интернет-сервис помощи студентам

У меня почему то :nth-child который должен быть 1 стал вторым и причин для этого я не вижу.
то есть <div class="HeaderButton"> который первый в структуре воспринимает значение только 2

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
@charset "utf-8";
/* CSS Document */
 
html, body{
padding: 0;
margin: 0;
background: #fff;
color: #2e2e2e;
font-family: 'Ubuntu', sans-serif, "sans-serif";
font-size: 16px;
}
a{
color: #B23730;
text-decoration: underline;
}
main{
max-width: 1280px;
margin: 0 auto;
 
}
header{
height: 150px;
margin: 60px 0px 0px 0px;
display: flex;
jjustify-content: space-between;
align-items: center;
}
 
.HeaderLogo{
text-align: center;
flex-basis: 50%;
}
.HeaderButton{
width: 320px;
display: flex;
justify-content: center;
align-items: center;
}
.HeaderButton:nth-child(2){
margin-left: 300px;
}
.Button:nth-child(1){
margin: 0px 1rem 0px 0px;
}
.Button:nth-child(2){
width: 60px;
}
.color{
color: #B23730;
}
.deviz{
font-size: 12px;
color: #2e2e2e2;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<main>
<header>
  <div class="HeaderLogo">
  <img src="images/logotip1.svg" width="80%" alt=""><br>
  <p class="deviz">Девиз социального приюта <span class="color">Дари добро</span></p>
  </div>
  <div class="HeaderButton">
  <div class="Button"><a href="#">Стать волонтером</a></div>
  <div class="Button"><img src="images/iconka5.svg" alt=""></div>
  </div>
  <div class="HeaderButton">
  <div class="Button"><a href="#">Помочь приюту</a></div>
  <div class="Button"><img src="images/iconka6.svg" alt=""></div>
  </div>
</header>
</main>

@sergei2210 · 19.07.2019, 16:11 **[ТС]**

Сообщение от Xolog

с nth так и должно быть(так же как и с прочими псевдоклассами, которые определяют номер элемента) советую прочесть статью про него

я могу с десяток ссылок сюда накидать то что я прочел

@Xolog · 19.07.2019, 16:12

https://htmlacademy.ru/demos/2#step1

это про nth-child

@Xolog · 19.07.2019, 16:15

https://habr.com/ru/post/119139/

nth-of-type

@Xolog · 19.07.2019, 16:21

есть ещё много подобных селекторов, но этого должно хватить для понимания

Добавлено через 1 минуту
чтобы решить вашу проблему хватит того решения которое я писал выше

Добавлено через 3 минуты
если есть ещё вопросы то задавай

@sergei2210 · 19.07.2019, 16:48 **[ТС]**

Вот видео продолжительность 36 секунд, моего не допонимание почему оно работает не так как нужно

https://www.screencast.com/t/quiXtq7n0qh

@Your_Euphoria · 19.07.2019, 17:09

Смотрите, вот такой селектор

CSS
1
.HeaderButton:nth-child(2)

простыми словами это "ХедерБаттон, который является вторым ребенком своего родителя", а не "второй по счету ребенок ХедерБаттона". Я так понимаю вы пытаетесь выбрать второго ребенка ХедерБаттона, если так, то нужно делать иначе.
Если его тег или класс не известен

CSS
1
2
.HeaderButton > * + * {
}

Или как в вашем случае

CSS
1
.Button:nth-child(2) {}

@novichek_1905 · 19.07.2019, 17:12

sergei2210, ну вы же пишите селектор к элементу HeaderButton, указывая на его порядковый номер, а хотите что бы выбирался его потомок... Что бы работал потомок, нужно изменить селектор.

CSS
1
2
3
.HeaderButton:nth-of-type(2) .Button:nth-of-type(1){
   margin-left: 300px;
}

@Your_Euphoria · 19.07.2019, 17:12

Сообщение от sergei2210

Вот видео продолжительность 36 секунд, моего не допонимание почему оно работает не так как нужно

Проблема в том, что вы уверены что стили применяются к детям того элемента, который вы указали, но это не так! Они применяются к нему самому, точнее ко всем элементам, которые под него подходят, но никак не к детям.

@sergei2210 · 19.07.2019, 17:41 **[ТС]**

Я почти все понял но я не понимаю принципа как они выбирают

https://www.screencast.com/t/UWjgAGh7nCZ

1:33 времени

Помогите до конца разобраться

@Your_Euphoria · 19.07.2019, 17:58

Сообщение от sergei2210

Я почти все понял но я не понимаю принципа как они выбирают

Например в body есть единственный елемент.parent, в нем трое детей

1).child-boy,
2).child-girl,
3).child-girl.

Селектор .parent:nth-child(2), к примеру, не сработает, так как .parent сам по себе единственный ребенок.
Селектор .child-boy:nth-child(2) не сработает, так как он первый ребенок, а второй ребенок это .child-girl.
Селектор .сhild-girl:nth-child(2) сработает, и выберет второй элемент, так как второй ребенок имеет такой класс.
Соответственно .child-girl:nth-child(1) не сработает, потому что первый ребенок их общего родителя это .child-boy.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
    <div class="parent">
        <div class="child-boy">
            Первый
        </div>
        <div class="child-girl">
            Второй
        </div>
        <div class="child-girl">
            Третий
        </div>
    </div>
</body>

@sergei2210 · 19.07.2019, 18:21 **[ТС]**

То есть они условно уже пронумерованы не зависимо от их классов айди и типов тэга, да?

Добавлено через 10 минут
Походу так и есть, а как тогда правильно написать к классу .child-girl, что бы он повлиял на child-boy

@Your_Euphoria · 19.07.2019, 18:24

Да, они как-будто пронумерованы, как дети одного родителя. Тип тега играет важную роль в псевдоселекторе :nth-of-type, а классы могут иметь значение только когда решается подпадает этот конкретный элемент под указаный класс, или нет. Тоесть .child-boy:nth-child(3) найдет этот третий элемент, сравнит, но не выберет его, так как классы не совпадают, в разметке .child-girl, а в селекторе .child-boy.
Мы не можем просто так найти первый элемент с конкретным классом со списка элементов с таким же классом, если они будут в перемешку с другими элементами. Даже :nth-of-type здесь не всегда поможет, потому что он различает типы по тегах, а не по классах. Теоретически это возможно, но используя сложные конструкции.

@sergei2210 · 19.07.2019, 18:30 **[ТС]**

Спасибо всем, помогли разобраться, я не правильно понимал на что они влияют. Но знаете что самое забавное я уже использовал их в своей работе и все работало )))) Как так возможно было если я все время думал не туда )))

@Your_Euphoria · 19.07.2019, 18:31

Сообщение от sergei2210

а как тогда правильно написать к классу .child-girl, что бы он повлиял на child-boy

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

@sergei2210 · 19.07.2019, 19:00 **[ТС]**

Сообщение от Your_Euphoria

На него можно влиять через родителя.

А вот это можно поп подробнее

@Xolog · 19.07.2019, 19:13

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

@Your_Euphoria · 19.07.2019, 19:30

Сообщение от sergei2210

А вот это можно поп подробнее

Обычная вложенность

CSS
1
.block .item {}

и

CSS
1
.block > .item {}

Новые блоги и статьи Все статьи Все блоги /
сукцессия 41 anaschu 24.07.2026 Численная верификация бифуркации в агентной модели лесной сукцессии: от одного параметра к ансамблю Автор: пользователь @Shumilov_AS \| Раздел: Прикладная математика / Численные методы Кратко. . .	сукцессия 40. Ансамблевая кластерная параметризаци, часть 1. anaschu 24.07.2026 Пр# Сопровождение научной статьи ИИ-ассистентом: подготовка публикации и калибровка агентно-ориентированной модели сукцессии микоризных систем Полевые заметки о двухнедельной совместной работе. . .	Теория всего 12. ВГК на планете в стратегической игре "терра" anaschu 21.07.2026 ### Главные семантические изменения и дешифровка новой физики 1. `REPRODUCTIVE_EMISSION` вместо фотосинтеза (`PS_base`): Энергия и ресурсы, которые класс средних мужчин (`_W_MEN_DONORS`). . .	Публикация отклонённая на хабре. Как «пернатого» заставить осваивать новые горизонты опыта через масштабирование задачи и целеполагание Hrethgir 21.07.2026 https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11948&stc=1&d=1784657928 Привет Хабр. В этой статье я расскажу, как один закон эпистемологии позволил мне с ходу запустить уникальный. . .
Теория всего 11. Основные параметры anaschu 21.07.2026 Дешифровка тензорного ядра Soil Chemistry 2. 0: Истинный инвариант Теории Всего Чистовой исходный код многокомпонентной сукцессии зафиксирован. Модель оперирует единым вектором состояния. . .	Теория всего 10. Клод трусишка anaschu 21.07.2026 Алгоритмический суицид ИИ: Когда математика ОДУ взламывает цензурные шлюзы Свежайший мета-прецедент нашей разработки! Клод официально отказался строить итоговую кроссплатформенную модель, как. . .	Теория всего 9. Окончательная проработка метафоры "дерево = традиции" anaschu 21.07.2026 Скрытые параметры ядра ОДУ: Механика Глубинного Рока Клод утаил от вас ключевую математику кризисов. В движке игры зашиты пять скрытых коэффициентов, определяющих, как именно ТНК и Мемы ломают. . .	Теория всего 8. Clauude трусишка. Ответ джемени anaschu 21.07.2026 Игровой баланс «Модели Всего»: Алгоритмический блок как механика Семантического БуфераЭтот скриншот отказа Клода — идеальный, чистейший прецедент для нашей Теории Всего. Вы столкнулись не просто с. . .

Последовательность :nth-child

Решение

Решение

@Xolog 2 / 2 / 0 Регистрация: 19.07.2019 Сообщений: 18
	19.07.2019, 16:12
	https://htmlacademy.ru/demos/2#step1 это про nth-child Миниатюры 0

@Xolog 2 / 2 / 0 Регистрация: 19.07.2019 Сообщений: 18
	19.07.2019, 16:15
	https://habr.com/ru/post/119139/ nth-of-type Миниатюры 0

@Xolog 2 / 2 / 0 Регистрация: 19.07.2019 Сообщений: 18
	19.07.2019, 16:21
	есть ещё много подобных селекторов, но этого должно хватить для понимания Добавлено через 1 минуту чтобы решить вашу проблему хватит того решения которое я писал выше Добавлено через 3 минуты если есть ещё вопросы то задавай 1

@sergei2210 2 / 2 / 0 Регистрация: 07.04.2016 Сообщений: 277
	19.07.2019, 16:48 [ТС]
	Вот видео продолжительность 36 секунд, моего не допонимание почему оно работает не так как нужно https://www.screencast.com/t/quiXtq7n0qh 0

@sergei2210 2 / 2 / 0 Регистрация: 07.04.2016 Сообщений: 277
	19.07.2019, 17:41 [ТС]
	Я почти все понял но я не понимаю принципа как они выбирают https://www.screencast.com/t/UWjgAGh7nCZ 1:33 времени Помогите до конца разобраться 0

@sergei2210 2 / 2 / 0 Регистрация: 07.04.2016 Сообщений: 277
	19.07.2019, 18:21 [ТС]
	То есть они условно уже пронумерованы не зависимо от их классов айди и типов тэга, да? Добавлено через 10 минут Походу так и есть, а как тогда правильно написать к классу .child-girl, что бы он повлиял на child-boy 0

@Your_Euphoria 61 / 46 / 20 Регистрация: 13.06.2019 Сообщений: 101
	19.07.2019, 18:24
	Да, они как-будто пронумерованы, как дети одного родителя. Тип тега играет важную роль в псевдоселекторе :nth-of-type, а классы могут иметь значение только когда решается подпадает этот конкретный элемент под указаный класс, или нет. Тоесть .child-boy:nth-child(3) найдет этот третий элемент, сравнит, но не выберет его, так как классы не совпадают, в разметке .child-girl, а в селекторе .child-boy. Мы не можем просто так найти первый элемент с конкретным классом со списка элементов с таким же классом, если они будут в перемешку с другими элементами. Даже :nth-of-type здесь не всегда поможет, потому что он различает типы по тегах, а не по классах. Теоретически это возможно, но используя сложные конструкции. 0

@sergei2210 2 / 2 / 0 Регистрация: 07.04.2016 Сообщений: 277
	19.07.2019, 18:30 [ТС]
	Спасибо всем, помогли разобраться, я не правильно понимал на что они влияют. Но знаете что самое забавное я уже использовал их в своей работе и все работало )))) Как так возможно было если я все время думал не туда ))) 0

@Xolog 2 / 2 / 0 Регистрация: 19.07.2019 Сообщений: 18
	19.07.2019, 19:13
	ну тут очень много способов, самый простой это контексные селекторы, то что мы делаем чаще всего наверно 1