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

What are the ways to incorporate the width property in @media queries within CSS?

Executing Javascript code from a specified web address

Display the initial page and activate the first navigation button when the page loads

Utilizing data attributes and JavaScript to dynamically assign a class to carousel navigation items

The markers on Google Maps are currently displaying in the wrong position, despite the latitude and longitude being correct

concealing components during screen adjustments

I'm curious why this is happening. Is it due to the default padding or margin property?

Superimpose two actionlinks and prioritize the one appearing above

Tips for designing an Ionic app with a Pinterest-inspired layout

Alignment problem

Excessive greed in 2 column layout is causing left alignment issues

Learn how to display a web page in a tab view similar to the toggle device toolbar option

The CSS styles are not being completely applied to the PHP function

Issues with implementing CSS Icon Generated Content on a live Azure Web Role

Incorporate dynamic HTML into Angular by adding CSS styling

<p> The box is massive, and its size is a mystery to me

Please indicate the number of lines for the href within the span element

Turn off scroll bar to create a seamless browsing experience on your website

Angular animation will be triggered when the user clicks using ng-click

Tips for increasing the font size using html and css?