How to style every odd p element after h2 element occured in css?

Question

I have a HTML that is messed and i can not change it, it looks like this:

<div>
  <h2>This is a title cat</h2>
  <p>This is a message</p>
  <p>One cat</p>
  <p>Two cat</p>
  <p>Three cat</p>
  <h2>This is a title dog</h2>
  <p>Dog 0</p>
  <p>Dog 1</p>
  <p>Dog 2</p>
  <p>Dog 3</p>
</div>

Now i would like to make every odd p that comes after a h2 element bolder. So i would like this to be in bold:

This is a message

Two cat

Dog 0

Dog 2

How to write a selector in CSS (no jQuery, no JS available) to make those texts bold?

Answer 1

You can do this by using the css ~ selector, followed by the nth-of-type (alternatively nth-child) selector. You can read more about it these selectors on the MDN: General Sibling Selector and :nth-of-type.

And here's how to achieve what you wanted. Essentially, you're selecting all odd <p> elements that are siblings (i.e that come after) an <h2> tag.

h2 ~ p:nth-of-type(odd) {
  font-weight: 600;
}

<div>
  <h2>This is a title cat</h2>
  <p>This is a message</p>
  <p>One cat</p>
  <p>Two cat</p>
  <p>Three cat</p>
  <h2>This is a title dog</h2>
  <p>Dog 0</p>
  <p>Dog 1</p>
  <p>Dog 2</p>
  <p>Dog 3</p>
</div>

Answer 2

h2 ~ p:nth-of-type(2n+1){
font-weight: 600;
}