border between children using selectors - css

Question

What's the typical way to add a border between children of different elements in a div?
In the following example, there should be borders between p,div and div,img.
<div id="list">
<p>child 1</p>
<div>child 2</div>
<img src="">
</div>
If all the children were div, #list > div~div { border-top: 1px solid black } would be sufficient, but with different elements, this seems impractical. I attempted #list > ̃ { border-top: 1px solid black } with no success. However, #list > :not(:first-child) { border-top: 1px solid black } did work. While it's a working solution, I was wondering if there was a better way?

Answer 1

It depends on your expectation of the final layout. Firstly, I assume you want the elements inside #list to be horizontally aligned. I use a flexbox for that in my code below.
You can define a border at the right of the elements except for the last one:
#list {
display: flex;
align-items: center;
}
#list>*:not(:last-child) {
border-right: thick solid blue;
}
<div id="list">
<p>child 1</p>
<div>child 2</div>
<img src="http://placehold.it/50">
</div>
However, if you need to use margins for specific elements, the borders may no longer be aligned vertically.
#list {
display: flex;
align-items: center;
}
#list>*:not(:last-child) {
border-right: thick solid blue;
}
<div id="list">
<p style="margin: 1em;">child 1</p>
<div>child 2</div>
<img src="http://placehold.it/50">
</div>
<div id="list">
<p>child 1</p>
<div>child 2</div>
<img src="http://placehold.it/50">
</div>

Answer 2

#list :not(:last-child) {
border-bottom: 1px solid red;
}

Answer 3

This shoud work aswell
#list * {
border: 1px solid red;
}
https://jsfiddle.net/84djw33j/2/

Answer 4

Try using :first-of-type, :last-of-type, and :only-of-type pseudo-selectors Here's a useful link