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

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

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