Не делайте отступ в первой строке первого абзаца с помощью CSS

Как мне предотвратить отступ строки для первого абзаца в разделе?

Это очень распространено для многих академических форматов.

Пример вывода

Вступление

Для первого абзаца в разделе нет отступа: Lorem ipsum dolor sit amet, conctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In eu mi bibendum neque egestas congue. Arcu cursus vitae congue mauris roncus aenean vel elit.

Для всех следующих абзацев существует отступ, установленный text-indent: Sed velit dignissim sodales ut. Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum. Augue mauris augue neque gravida in fermentum et sollicitudin ac.

Для всех следующих абзацев существует отступ с помощью text-indent: Nunc sed id semper risus in hendrerit. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Ut porttitor leo a diam sollicitudin tempor id. Facilisis mauris сидят амет масса витэ тортор приправы lacinia quis. Sagittis vitae et leo duis ut.

Прямо сейчас в моем CSS есть следующий код

p {
  text-indent: 50px;
}

html css formatting text-formatting
person HoneyBuddha    schedule 01.04.2020    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Вы можете использовать псевдокласс css 'first-of-type'

p:first-of-type {
  text-indent: 0;
}

Поскольку селектор css подразумевает, что стиль будет применяться только к первому элементу p.

person Steve Winter    schedule 01.04.2020
comment
Оба ответа работают, но их легче вспомнить или понять при просмотре кода (т. Е. Более дружественный к человеку), поэтому выбран правильный ответ. - person HoneyBuddha; 02.04.2020

arrow_upward
2
arrow_downward

Вы можете использовать комбинатор смежных братьев и сестер CSS следующим образом:

p + p {
  text-indent: 50px;
}

Запустите код, чтобы увидеть результат

p + p {
  text-indent: 50px;
}
<h1>Introduction</h1>

<p>For the first paragraph in the section, there is no indent: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In eu mi bibendum neque egestas congue. A arcu cursus vitae congue mauris rhoncus aenean vel elit.</p>

<p>For all following paragraphs, there is an indent set by text-indent: Sed velit dignissim sodales ut. Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum. Augue mauris augue neque gravida in fermentum et sollicitudin ac.</p>

<p>For all following paragraphs, there is an indent set by text-indent: Nunc sed id semper risus in hendrerit. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Ut porttitor leo a diam sollicitudin tempor id. Facilisis mauris sit amet massa vitae tortor condimentum lacinia quis. Sagittis vitae et leo duis ut.</p>

person Zekros Admines    schedule 01.04.2020