Dont Indent First Line of First Paragraph using CSS

Question

How would I prevent the line indent for the first paragraph in a section?

This is very common for many academic formats.

Sample Output

Introduction

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.

      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.

      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.

Right now, I have the following code in my CSS

p {
  text-indent: 50px;
}

Answer 1

You may want to use the css pseudo-class 'first-of-type'

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

As the css selector implies the styling will only apply to the first p element.

Answer 2

You can use CSS Adjacent sibling combinator like this:

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

Run the code to see the result

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>

Answer 3

You are correct, don't indent the first line of the first paragraph. To attract the eye, use an initial cap (increases readership around 15%).

However, in best-practices typography, you should only use one or the other: 1) a space between paragraphs (not a whole space, mind you) and no indent OR 2) no space between paragraphs and but indent the first line.

* {
  margin: 0;
  padding: 0;
}
h3 {
  font-family: Georgia;
  font-size: 1.5rem;
  line-height: 1.3rem;
  font-weight: normal;
  margin: 2.0rem 0;
}
p {
  font-family: Georgia;
  font-size: 1.0rem;
  line-height: 1.3rem;
}
.space-noindent p {
  margin-bottom: 0.8rem;
}
.nospace-indent p:nth-child(1n+2) {
  text-indent: 1.5rem;
}
.space-noindent p:nth-of-type(1):first-letter{
  font-size: 2.5rem;
}

<div class="space-noindent">
<h3>Space, no indent:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt imperdiet justo, ac rhoncus urna sollicitudin vitae. Duis eu dolor eu dui tempor cursus. Phasellus sit amet velit sit amet metus accumsan rhoncus. Maecenas et est odio, id tincidunt ligula. Donec sapien diam, vestibulum ac cursus eget, dignissim vel diam. Praesent interdum vestibulum erat nec volutpat.</p>
<p>Suspendisse interdum congue sagittis. Suspendisse tortor ligula, facilisis nec molestie vel, laoreet sed diam. Integer libero orci, iaculis dapibus adipiscing sed, varius ut dui. Nullam posuere commodo quam eget ultricies. Duis luctus, mauris at iaculis tempor, ipsum elit auctor neque.</p>
<p>Duis eu dolor eu dui tempor cursus. Phasellus sit amet velit sit amet metus accumsan rhoncus. Maecenas et est odio, id tincidunt ligula. Donec iaculis dapibus adipiscing sed sapien diam, vestibulum ac cursus ege.</p>
</div>
<h3>No space, indent:</h3>
<div class="nospace-indent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt imperdiet justo, ac rhoncus urna sollicitudin vitae. Duis eu dolor eu dui tempor cursus. Phasellus sit amet velit sit amet metus accumsan rhoncus. Maecenas et est odio, id tincidunt ligula. Donec sapien diam, vestibulum ac cursus eget, dignissim vel diam. Praesent interdum vestibulum erat nec volutpat.</p>
<p>Suspendisse interdum congue sagittis. Suspendisse tortor ligula, facilisis nec molestie vel, laoreet sed diam. Integer libero orci, iaculis dapibus adipiscing sed, varius ut dui. Nullam posuere commodo quam eget ultricies. Duis luctus, mauris at iaculis tempor, ipsum elit auctor neque.</p>
<p>Duis eu dolor eu dui tempor cursus. Phasellus sit amet velit sit amet metus accumsan rhoncus. Maecenas et est odio, id tincidunt ligula. Donec iaculis dapibus adipiscing sed sapien diam, vestibulum ac cursus ege.</p>
</div>