This is the desired outcome I am aiming for
https://i.sstatic.net/nKiz3.png
The parent div has a white background, and I want to add padding to the left, right, and top, without applying it to the last child div. How can this be achieved using CSS? When adding padding directly, it affects all children, so is there a way to prevent this for a specific child?
JSX Structure:
<div className="parent">
<div className="child-1"></div>
<div className="child-2"></div>
<div className="child-3"></div>
</div>
I have organized the children divs, but I'm struggling to apply padding based on the required condition.
Is individually applying margin to each child the only solution? (I prefer not to do this as the number of children could change dynamically, making it hard to maintain)