Почему не работает nth-child?

Question

[Антон]

Пытаюсь сделать лесенку из H-тегов.

// CSS
.markdown h1:nth-child(1), .markdown h2:nth-child(1), .markdown h3:nth-child(1),
.markdown h4:nth-child(1), .markdown h5:nth-child(1), .markdown h6:nth-child(1) {
	margin-left: 1rem;
}
.markdown h1:nth-child(2), .markdown h2:nth-child(2), .markdown h3:nth-child(2),
.markdown h4:nth-child(2), .markdown h5:nth-child(2), .markdown h6:nth-child(2) {
	margin-left: 2rem;
}

// SCSS
.markdown {
	h1, h2, h3, h4, h5, h6 {
		&:nth-child(1) {
			margin-left: 1rem;
		}
		&:nth-child(2) {
			margin-left: 2rem;
		}
	}
}

В HTML коде есть div блок с классом markdown, в котором есть H-теги:

<div class="markdown">
	<h2>Заголовок</h2>
	<h3>Подзаголовок 1</h3>
	<h4>Подзаголовок 2</h4>
	<p>Текст</p>
</div>

Но отступов нет. Если без nth-child использовать margin, то работает.

Что я делаю не так?

Answer 1

[Максим Тимофеев]

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

Comments

[Антон]

Добавил описание про HTML код. Но повторюсь тут - там div блок с классом markdown, внутри которого текст в p (параграфах), а также эти заголовки. Незакрытых тегов нет.

[Максим Тимофеев]

Антон: nth-child это номер потомка, у Вас нет потомков у h2, h3 и т.д.

[Антон]

Максим Тимофеев: понял вас. А как тогда реализовать мою идею?

[Максим Тимофеев]

я не знаю, что Вы хотите, но видимо .markdown:nth-child(1) {margin-left: 1rem;} тогда сработает на первом теге в markdown, в примере это h2

[Антон]

Максим Тимофеев: h1 - без отступа. Для остальных "+1rem", чтобы выходило что-то типа лесенки.

[Антон]

Максим Тимофеев: Притом чтобы это не зависело от цифры в H-теге. например, если будут друг за другом теги:
h1
h3
h5
то они должны быть с разницей в "1rem".

[Максим Тимофеев]

Антон: тогда всем h задать класс например 'my-margin'
и в css:

.markdown > .my-margin:nth-of-type(1) {margin-left:10px;}
.markdown > .my-margin:nth-of-type(2) {margin-left:20px;}
.markdown > .my-margin:nth-of-type(3) {margin-left:30px;}
.markdown > .my-margin:nth-of-type(4) {margin-left:40px;}
.markdown > .my-margin:nth-of-type(5) {margin-left:50px;}

[Максим Тимофеев]

Максим Тимофеев: не дочитал, про rem, но логика та же

[Антон]

Максим Тимофеев: почти, только теперь появилась другая проблема - между заголовками есть параграфы. То есть, например, два заголовка, далее текст обычный, после снова заголовок, и вот он имеет отступ, хотя по сути первый. Надеюсь, верно донес суть.

[Максим Тимофеев]

Антон: но если это все выводит цикл, наприер php, то проще в нем классы задать .margin10, .margin20 и т.д.

[Антон]

Максим Тимофеев: это markdown разметка. В БД лежит большой текст.

[Максим Тимофеев]

Антон: нет понятно суть, дайте полный html код

[Антон]

Максим Тимофеев: в текста вопроса есть пример HTML. Только тот кусок, представьте, используется много раз. Есть много заголовков, много параграфов. И вот после очередного параграфа заголовок имеет отступ "5rem".

[Максим Тимофеев]

Антон: тогда просто:

.markdown > h1 {margin-left:10px;}
.markdown > h2 {margin-left:20px;}
.markdown > h3 {margin-left:30px;}
.markdown > h4 {margin-left:40px;}
.markdown > h5 {margin-left:50px;}

[Максим Тимофеев]

Антон: "это markdown разметка" - нет. div, p, h1 - это уже не markdown. https://ru.wikipedia.org/wiki/Markdown

[Антон]

Максим Тимофеев: ну она парсится в итоге в HTML. Я написал это к тому, что php тут не поможет. Идет массив текста из БД.

[Максим Тимофеев]

Антон: Идет массив текста из БД куда? Какой серверный язык? Что обращается к базе и чем потом парсите? Где-то на этих этапах можно решить вопрос.