Последовательность :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 {}

Новые блоги и статьи Все статьи Все блоги /
Программа для com-порта Uhbif79 05.06.2026 Всем привет, давно хотел изучить Qt, начинал, бросал, потом снова начинал. И сейчас вот смог написать свою первую программу. До этого имел опыт программирования микроконтроллеров, писал прошивки на. . .	Транскрипция 55-минутного видео через Whisper: WhisperDesktop облажался, спас Google Colab[ anaschu 01.06.2026 Понадобилось получить текст из свежезагруженного видео на YouTube. Казалось бы, задача на пять минут. Заняла полтора часа. Делюсь опытом — может кому пригодится последовательность решений. . . .	21 мат мед. Планы на развитие модели здравоСохранения anaschu 01.06.2026 AnyLogic: план развития симуляционной модели рабочего коллектива — динамический абсентеизм, реальные данные, три сценария сравнения Продолжаю серию постов о дискретно-событийной модели рабочего. . .	20. Мат мед. Абсентеизм как отдельный тип простоя anaschu 29.05.2026 Апдейт модели: исправленные баги, абсентеизм и новые механизмы Продолжаю развивать ранее описанную модель рабочего коллектива на AnyLogic. За последние несколько дней был проведён серьёзный. . .
19. здоровье, усталость и психотип работника влияют на производительность предприятия, и наоборот, производительность на здоровье, усталось и психотип anaschu 28.05.2026 Дискретно-событийная модель рабочего коллектива на AnyLogic: здоровье, выгорание, психотипы и микростимуляция Привет, коллеги. Хочу поделиться итогами нескольких недель работы над симуляционной. . .	"Прокси" для последовательного порта Eddy_Em 28.05.2026 Эту штуку написал я достаточно давно. Но сейчас вот понадобилось настроить датчик грозы, но при этом не отключать его от "метеодемона". Соответственно, надо запустить этот "прокси": метеодемон будет. . .	Рефакторинг программы уравнивания. Massaraksh7 26.05.2026 Пример по предыдущей записи в блоге. Но, надо заметить, что, во-первых, там оптимизация не только математики, но и работы с базой данных, и с графами, а во-вторых, это ещё не всё.	Использование TThread в Lazarus для математических вычислений. Massaraksh7 26.05.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