CSS - psuedo-class for first
after another tag

Question

Is there an equivalent for the psuedo-class, first-of-type, but applies to, e.g., a <p> preceded by a <hr>, rather than just applying to the first child-tag?

As an example, I'd like first-of-type to apply to both paragraphs preceded by <h1>, rather than just the first:

<head>
  <style>
    p{text-indent:1%;}
    p:first-of-type{text-indent:0%;}
  </style>
  <title>Mara's Tale</title>
</head>
<body>
  <h1>Chapter 1</h1>
  <p>This is a first-of-type.</p>
  <p>But this isn't (good!).</p>

  <h1>Chapter 2</h1>
  <p>This is not first-of-type, but I'd like it to be.</p>
  <p>This is not first-of-type (good!).</p>
</body>
</html>

At the moment, I'm running a regex to add a class to any <p> not preceded by </p>, but, as a solution, it irks me.

Update to add:

Heh - for some reason, this confused the hell out of my Sony e-reader*, which then started ignoring a valid first-of-type.

I had to change this CSS:

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

p.dinkus {
  text-align: center;
  text-indent: 0%;
  font-size: 125%;
  margin-top: 6%;
  margin-bottom: 4%;
  white-space: pre;
}

p.dinkus + p{
  text-indent: 0%;
}

To this:

h1 + p{
  text-indent: 0%;
}

p.dinkus {
  text-align: center;
  text-indent: 0%;
  font-size: 125%;
  margin-top: 6%;
  margin-bottom: 4%;
  white-space: pre;
}

p.dinkus + p{
  text-indent: 0%;
}

Just to clarify, my general structure is:

<h1>Chapter 3</h1>
<p>Opening para - don't indent.</p>
<p>Non-opening para - do indent.</p>
<p class="dinkus">*                *                *</p>
<p>Para following a dinkus - don't indent.</p>
<p>Non-opening para, not following a dinkus - do indent.</p>

* seems to be a Sony bug - Sigle and Calibre had no issues

You cannot traverse up the DOM tree with CSS . Only down. From parent to child. — Mihai T, Oct 29 '20 at 10:31
If the paragraph is ALWAYS preceded by the heading then yes. H1+p — Paulie_D, Oct 29 '20 at 10:40
Does this answer your question? [What does the "+" (plus sign) CSS selector mean?](https://stackoverflow.com/questions/1139763/what-does-the-plus-sign-css-selector-mean) — ppwater, Oct 29 '20 at 13:43

score 1 · Accepted Answer · answered Oct 29 '20 at 10:47

You can always use the CSS element+element Selector in this case h1 + p should target all <p> tag that is preceded by h1 tag.

 h1 + p{
  text-indent:1%;
  color: red
 }

  <title>Mara's Tale</title>


  <h1>Chapter 1</h1>
  <p>This is a first-of-type.</p>
  <p>But this isn't (good!).</p>

  <h1>Chapter 2</h1>
  <p>This is not first-of-type, but I'd like it to be.</p>
  <p>This is not first-of-type (good!).</p>

score 0 · Answer 2 · answered Oct 29 '20 at 10:45

You can use x + y selector. It selects all y elements that are placed immediately after x elements

p {text-indent:1%; color: red; }
h1 + p {text-indent:0%; color: blue; }

<h1>Chapter 1</h1>
  <p>This is a first-of-type.</p>
  <p>But this isn't (good!).</p>

  <h1>Chapter 2</h1>
  <p>This is not first-of-type, but I'd like it to be.</p>
  <p>This is not first-of-type (good!).</p>

score 0 · Answer 3 · answered Oct 29 '20 at 12:08

You can use the + selector, which basically means the one after.

So, in your case, that means you can simply use:

h1 + p

which will let you target the p after the h1.

If you ever want to target all the p elements after a h1, you just change the + to a ~

You can then apply CSS rules as normal for this :)

By the way, here is a diagram I made earlier for this question, which should help explain this:

the + selector targets the one after, and the ~ selector targets all the ones after

CSS - psuedo-class for first after another tag

3 Answers3

CSS - psuedo-class for first
after another tag