separating kids with selectors

Question

separating kids with selectors

What is the recommended method for adding borders between children of various elements within a div?

In the example below, 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 suffice. However, with different elements, this approach seems challenging. I tried

#list > ̃ { border-top: 1px solid black }

without success. Nonetheless,

#list > :not(:first-child) { border-top: 1px solid black }

worked. Although it's functional, I'm curious if there is a more efficient solution?

css css-selectors

Answer 1

Answer №1

The final layout you desire will determine the appropriate approach. Assuming you want the elements within #list to align horizontally, I have utilized flexbox in my code snippet below.

To add a border to all 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>

Keep in mind that if you introduce margins to specific elements, the alignment of borders may be affected 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

The final layout you desire will determine the appropriate approach. Assuming you want the elements within #list to align horizontally, I have utilized flexbox in my code snippet below.

To add a border to all 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>

Keep in mind that if you introduce margins to specific elements, the alignment of borders may be affected 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 3

Answer №2

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

Answer 4

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

Answer 5

Answer №3

This should also function properly

.list * {
 border: 1px solid blue;
}

https://jsfiddle.net/24ekm77s/8/

Answer 6

This should also function properly

.list * {
 border: 1px solid blue;
}

https://jsfiddle.net/24ekm77s/8/

Answer 7

Answer №4

Experiment with the :first-of-type, :last-of-type, and :only-of-type pseudo-selectors! Check out this informative resource for more details.

Answer 8

Experiment with the :first-of-type, :last-of-type, and :only-of-type pseudo-selectors! Check out this informative resource for more details.

separating kids with selectors

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Using a background image from your own website does not display anything, but using an image from an

The color used to highlight questions on Stackoverflow

Styling elements using the nth-child selector in JavaScript

Struggling with adding two-digit numbers in a JavaScript calculator

Tips for reducing the amount of white space on a card featuring a pie chart in a mobile layout

Achieving left text alignment in CSS for an excerpt using the Ultimate Posts Widget on Wordpress

What could be causing my page to suddenly disappear?

The background image on my link bar is inexplicably not appearing

Can the PHP stylesheet import be configured to exclude a specific string?

Stacking background images in CSS above other contained elements in a div

I am encountering an issue while running npm run webpack in production mode where the CSS file is not being generated separately in the dist folder as expected. The file is not appearing as it should

Creating a clickable button within an image container using Bootstrap 5

Animating CSS using JavaScript

iPhone - touchstart event not functioning in JavaScript

Align two spans within a div using the margin auto property

Angular 6 and Bootstrap 4 Collaborate for a Dynamic Multi-Level NavBar

Tips for breaking out of the foundation row and aligning with the right edge of the viewport

Raise the image above the wrapping div, positioning it at the very bottom

Rotating Images in Query and Chrome

The formgroup label is currently displayed in uppercase, but I would prefer it to be in title case