Is there a way to style the last p within a specific class without affecting others?
For instance:
<div class="my-container">
<div class="banner-message1">
<p>1</p>
</div>
<div class="banner-message2">
<p>2</p>
</div>
</div>
How can I apply unique styling to just the <p>2</p> and not the <p>1</p>
The typical method of using div.my-container p:last-of-type won't work in this case since both <p>1</p> and <p>2</p> are the last paragraphs within their respective parent divs (banner-message1 and banner-message2)
https://jsfiddle.net/hygzq3ab/
In a JSFiddle example, you can see how applying last-of-type affects all last p tags, even when nested within different classes.
An attempt to use
div.my-container p:last-of-type { margin-bottom:0; }