How can i select every element before a specific element

Question

What i'm trying to do is add a border-radius to the last p of every "block" of p's so before the next h1, I can add the top radius using the + selector but can't figure out how to select the last one of each.

<main>
    <h1>test</h1>
  <p>hello</p>
    <h1>test</h1>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
    <h1>test</h1>
  <p>hello</p>
  <p>hello</p>
    <h1>test</h1>
  <p>hello</p>
  <p>hello</p>
    <h1>test</h1>
  <p>hello</p>
</main>

css

<style>
  p {
    background: black
  }
  h1 + p {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }
</style>

HasanTheSyrian_ HasanTheSyrian_ · Accepted Answer · 2022-07-28T19:24:57

Wrap every block of <p> and use :last-child. If you're doing many <p> it is best to just add a class to each element that has the desired styles.

<div>

  <p>Hello</p>
  <p>Hey</p>

</div>

p:last-child{
  font-size: 30px; // only last element has a font size of 30 px
}

You also didn't close any of your <p> tags. Make sure your code is formatted before posting.

How can i select every element before a specific element

1 Answers