Issue
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>
Solution
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.
Answered By - HasanTheSyrian_
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.