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

@novichek_1905 · 18.07.2019, 14:38

sergei2210, у вас HeaderButton дочерний элемент и он второй. Псевдоклас :nth-child(2) указывает, на порядковый номер элемента, внутри родителя.

@sergei2210 · 18.07.2019, 14:53 **[ТС]**

как второй когда он первый

@novichek_1905 · 18.07.2019, 15:05

sergei2210, я же сказал как он работает... Вы указываете :nth-child(2) это буквально порядковый номер потомка, ему пофиг какой класс.

@sergei2210 · 19.07.2019, 10:02 **[ТС]**

Я видимо не правильно понимал как он работает.

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

@novichek_1905 · 19.07.2019, 10:40

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

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

Да. Но ничего вам не мешает использовать :nth-of-type(n) он будет работать так как вам нужно, так как он начинает отсчет именно с конкретного элемента, принадлежащий к определенному типу.

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

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

Да. Но ничего вам не мешает использовать :nth-of-type(n) он будет работать так как вам нужно, так как он начинает отсчет именно с конкретного элемента, принадлежащий к определенному типу.

А почему тогда когда я ставлю значение 1 не чего не происходит, получается изменение должны коснуться .HeaderLogo но не касаются

@novichek_1905 · 19.07.2019, 11:36

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

А почему тогда когда я ставлю значение 1 не чего не происходит

Вы когда говорите, что, что-то делаете, сразу код сюда прикладывайте...

CSS
1
2
3
.HeaderLogo:nth-of-type(1){
  border: 1px solid red;
}

и что хотите сказать, что так не работает?)

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

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

не отодвигает

@novichek_1905 · 19.07.2019, 12:01

sergei2210, сложилось впечатление, что вы вовсе не читаете что я пишу)

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

Эти стили будут действовать только тогда, когда HeaderButton будет первым по счету элементом в родителе. Если вы хотите что бы работало задайте .HeaderButton:nth-of-type(1){...}

@Your_Euphoria · 19.07.2019, 12:06

Вы не выберете этот див, используя такие псевдоклассы. Лучше довесьте ему отдельный класc и не парьтесь. Почитайте как работает nth-child и nth-of-type. В двух словах, nth-of-type(1) заработает только тогда, когда у вас первый дочерний элемент (а в этом случае .HeaderLogo) не будет дивом, потому что этот селектор выбирает по тегу, а не классу. Тоесть для него все дивы равны по типу, класс он не учитывает.

@sergei2210 · 19.07.2019, 12:06 **[ТС]**

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

Эти стили будут действовать только тогда, когда HeaderButton будет первым по счету элементом в родителе. Если вы хотите что бы работало задайте .HeaderButton:nth-of-type(1){...}

не сработало тут скрыта какая то другая магия

@Your_Euphoria · 19.07.2019, 12:12

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

не сработало тут скрыта какая то другая магия

Почитайте сообщение выше и перестаньте биться головой об стенку)

@gogolik · 19.07.2019, 12:14

Задайте дополнительный класс для этой кнопки и не парьте мозг.

HTML5
1
<div class="HeaderButton second"></div>

CSS
1
2
3
.HeaderButton.second {
    margin-left: 300px;
}

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

Не кричите на меня я просто хочу понять и начать разбираться.

Что мне нужно изменить тут

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

что бы сдвинулось вот это

HTML5
1
 <div class="HeaderLogo">

@Your_Euphoria · 19.07.2019, 13:21

Никто на вас не кричит, вам советуют как проще и правильней сделать)

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

@sergei2210 · 19.07.2019, 13:46 **[ТС]**

Да я могу сделать то что мне нужно, сдвинуть элемент существует не один десяток способов.
Просто я думал что работа с :nth-child одним способом а сейчас понял что я ошибался

Я думал что если родителю написать :nth-child с каким то номером то его дети под этим номером будут повернуты изменениями

А тут получается что .HeaderButton есть два ребенка но когда я пишу что бы применилось что бы к первому его ребенку применился отступ в 300 пихалей не чего не происходит, а когда сталю цифру 2 то отодвигается сам родитель а не его дети.

@Xolog · 19.07.2019, 14:21

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

попробуй так

Добавлено через 1 минуту

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

Задайте дополнительный класс для этой кнопки и не парьте мозг.

HTML5
1
<div class="HeaderButton second"></div>

CSS
1
2
3
.HeaderButton.second {
    margin-left: 300px;
}

ну не хочет человек классянкой болеть

@sergei2210 · 19.07.2019, 15:47 **[ТС]**

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

@Xolog · 19.07.2019, 16:08

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

Новые блоги и статьи Все статьи Все блоги /
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 Использованы. . .

@novichek_1905 469 / 334 / 144 Регистрация: 16.02.2018 Сообщений: 930
	18.07.2019, 14:38
	sergei2210, у вас `HeaderButton` дочерний элемент и он второй. Псевдоклас :nth-child(2) указывает, на порядковый номер элемента, внутри родителя. 0

@sergei2210 2 / 2 / 0 Регистрация: 07.04.2016 Сообщений: 277
	18.07.2019, 14:53 [ТС]
	как второй когда он первый Миниатюры 0

@novichek_1905 469 / 334 / 144 Регистрация: 16.02.2018 Сообщений: 930
	18.07.2019, 15:05
	sergei2210, я же сказал как он работает... Вы указываете `:nth-child(2)` это буквально порядковый номер потомка, ему пофиг какой класс. 0

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

@Your_Euphoria 61 / 46 / 20 Регистрация: 13.06.2019 Сообщений: 101
	19.07.2019, 12:06
	Вы не выберете этот див, используя такие псевдоклассы. Лучше довесьте ему отдельный класc и не парьтесь. Почитайте как работает nth-child и nth-of-type. В двух словах, nth-of-type(1) заработает только тогда, когда у вас первый дочерний элемент (а в этом случае .HeaderLogo) не будет дивом, потому что этот селектор выбирает по тегу, а не классу. Тоесть для него все дивы равны по типу, класс он не учитывает. 0

@Your_Euphoria 61 / 46 / 20 Регистрация: 13.06.2019 Сообщений: 101
	19.07.2019, 13:21
	Никто на вас не кричит, вам советуют как проще и правильней сделать) Почему вы применяете правило для одного элемента, а хотите сдвинуть другой? Приведите пример из пейнта как что должно выглядеть. 0

@sergei2210 2 / 2 / 0 Регистрация: 07.04.2016 Сообщений: 277
	19.07.2019, 13:46 [ТС]
	Да я могу сделать то что мне нужно, сдвинуть элемент существует не один десяток способов. Просто я думал что работа с :nth-child одним способом а сейчас понял что я ошибался Я думал что если родителю написать :nth-child с каким то номером то его дети под этим номером будут повернуты изменениями А тут получается что .HeaderButton есть два ребенка но когда я пишу что бы применилось что бы к первому его ребенку применился отступ в 300 пихалей не чего не происходит, а когда сталю цифру 2 то отодвигается сам родитель а не его дети. 0

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

@Xolog 2 / 2 / 0 Регистрация: 19.07.2019 Сообщений: 18
	19.07.2019, 16:08
	с nth так и должно быть(так же как и с прочими псевдоклассами, которые определяют номер элемента) советую прочесть статью про него 0