Avoiding the application of a border-right to the final child of a div in CSS

Question

Avoiding the application of a border-right to the final child of a div in CSS

Check out this custom HTML code:

<div class="main">
<div class="parent">
  <div class="child">
    <span></span>
    <label></label>
  </div>
  <div class="child2">
   // some html content
 </div>
</div>
<div class="parent">
  <div class="child">
    <span></span>
    <label></label>
  </div>
  <div class="child2">
   // some html content
 </div>
</div>
<div class="parent">
  <div class="child">
    <span></span>
    <label></label>
  </div>
  <div class="child2">
   // some html content
 </div>
</div>
</div>

In order to add the border-right property to the child class, you can try the following CSS:

.parent.child:not(:last-child) {
  border-right: 1px solid tpBorderColor;
  padding-right: 20px;
}

If that doesn't work, you can attempt using this alternative approach:

.parent.child {
  border-right: 1px solid #e9e9e9;
}
.parent.child-child {
  border:none;
}

If these methods are not displaying the border as expected, do you have any other suggestions on how to achieve this?

html css

Answer 1

Answer №1

Uncertain if this is what you were searching for, but if your .child element is adjacent to another .child element in the document object model, you can easily apply a style like this:

.child + .child {
  border-left: 1px solid currentColor;
  padding-left: 20px;
}

This style rule targets the second .child element that appears next to another .child.

.child + .child {
  border-left: 1px solid currentColor;
  padding-left: 20px;
}

<div class="main">
    <div class="parent">
        <div class="child">
            <span>343</span>
            <label>sfs</label>
        </div>
        <div class="child">
            // some html content
        </div>
    </div>
    <div class="parent">
        <div class="child">
            <span>sfa</span>
            <label>afa</label>
        </div>
        <div class="child">
            // some html content
        </div>
    </div>
    <div class="parent">
        <div class="child">
            <span>343</span>
            <label>asfdfaf</label>
        </div>
        <div class="child">
            // some html content
        </div>
    </div>
</div>

Answer 2

Uncertain if this is what you were searching for, but if your .child element is adjacent to another .child element in the document object model, you can easily apply a style like this:

.child + .child {
  border-left: 1px solid currentColor;
  padding-left: 20px;
}

This style rule targets the second .child element that appears next to another .child.

.child + .child {
  border-left: 1px solid currentColor;
  padding-left: 20px;
}

<div class="main">
    <div class="parent">
        <div class="child">
            <span>343</span>
            <label>sfs</label>
        </div>
        <div class="child">
            // some html content
        </div>
    </div>
    <div class="parent">
        <div class="child">
            <span>sfa</span>
            <label>afa</label>
        </div>
        <div class="child">
            // some html content
        </div>
    </div>
    <div class="parent">
        <div class="child">
            <span>343</span>
            <label>asfdfaf</label>
        </div>
        <div class="child">
            // some html content
        </div>
    </div>
</div>

Answer 3

Answer №2

Great job on your code! Just a few tweaks were needed to get it perfect.

Here is the updated version for you to try:

.parent .child:not(:last-child) {
  border-right: 1px solid red;
  padding-right: 20px;
}

.child {
margin-bottom: 30px;
}

<div class="main">
    <div class="parent">
        <div class="child>
            <span>343</span>
            <label>sfs</label>
        </div>
        <div class="child">
            // some html content
        </div>
    </div>
    <div class="parent">
        <div class="child">
            <span>sfa</span>
            <label>afa</label>
        </div>
        <div class="child">
            // some html content
        </div>
    </div>
    <div class="parent">
        <div class="child">
            <span>343</span>
            <label>asfdfaf</label>
        </div>
        <div class="child">
            // some html content
        </div>
    </div>
</div>

Answer 4

Great job on your code! Just a few tweaks were needed to get it perfect.

Here is the updated version for you to try:

.parent .child:not(:last-child) {
  border-right: 1px solid red;
  padding-right: 20px;
}

.child {
margin-bottom: 30px;
}

<div class="main">
    <div class="parent">
        <div class="child>
            <span>343</span>
            <label>sfs</label>
        </div>
        <div class="child">
            // some html content
        </div>
    </div>
    <div class="parent">
        <div class="child">
            <span>sfa</span>
            <label>afa</label>
        </div>
        <div class="child">
            // some html content
        </div>
    </div>
    <div class="parent">
        <div class="child">
            <span>343</span>
            <label>asfdfaf</label>
        </div>
        <div class="child">
            // some html content
        </div>
    </div>
</div>

Answer 5

Answer №3

After analyzing the code provided, it appears that any borders assigned to the <div class="child"> element will not be visible due to the absence of content within the HTML elements.

Furthermore, an adjustment is required in your CSS styling.

The reason for this modification is because you are currently targeting all elements with the class="parent child", but none of your elements possess both selectors within a single class. As the classes (parent > child) are nested, a space between them is necessary in your CSS file (refer to the snippet below).

.parent .child:not(:last-child) {
  border-right: 1px solid tpBorderColor;
  padding-right: 20px;
}

For instance,

<style>
    .parent .child:not(:last-child) {
        border-right: 1px solid #000;
        padding-right: 20px;
    }
</style>

<div class="main">
    <div class="parent">
        <div class="child">
            <span></span>
            <label></label>
        </div>
        <div class="child2">
            // some html content
        </div>
    </div>
    <div class="parent">
        <div class="child">
            <span>// some html content</span>
            <label></label>
        </div>
        <div class="child2">
            // some html content
        </div>
    </div>
    <div class="parent">
        <div class="child">
            <span>// some html content</span>
            <label></label>
        </div>
        <div class="child2">
            // some html content
        </div>
    </div>
</div>

Please note that the first occurrence of the styled element is not displayed in the example above due to the absence of content.

<div class="parent">
    <div class="child">
        <span></span>
        <label></label>
    </div>
    <div class="child2">
        // some html content
    </div>
</div>

Answer 6

After analyzing the code provided, it appears that any borders assigned to the <div class="child"> element will not be visible due to the absence of content within the HTML elements.

Furthermore, an adjustment is required in your CSS styling.

The reason for this modification is because you are currently targeting all elements with the class="parent child", but none of your elements possess both selectors within a single class. As the classes (parent > child) are nested, a space between them is necessary in your CSS file (refer to the snippet below).

.parent .child:not(:last-child) {
  border-right: 1px solid tpBorderColor;
  padding-right: 20px;
}

For instance,

<style>
    .parent .child:not(:last-child) {
        border-right: 1px solid #000;
        padding-right: 20px;
    }
</style>

<div class="main">
    <div class="parent">
        <div class="child">
            <span></span>
            <label></label>
        </div>
        <div class="child2">
            // some html content
        </div>
    </div>
    <div class="parent">
        <div class="child">
            <span>// some html content</span>
            <label></label>
        </div>
        <div class="child2">
            // some html content
        </div>
    </div>
    <div class="parent">
        <div class="child">
            <span>// some html content</span>
            <label></label>
        </div>
        <div class="child2">
            // some html content
        </div>
    </div>
</div>

Please note that the first occurrence of the styled element is not displayed in the example above due to the absence of content.

<div class="parent">
    <div class="child">
        <span></span>
        <label></label>
    </div>
    <div class="child2">
        // some html content
    </div>
</div>

Avoiding the application of a border-right to the final child of a div in CSS

Answer №1

Answer №2

Answer №3

Similar questions

What can be achieved by combining Text Wrangler and terminal?

Why does the Autofocus Attribute in HTML5 fail to work specifically in FireFox when <Form><input> elements are dynamically loaded using Ajax?

What is the reason behind the image not displaying before the AJAX request is initiated and then disappearing once the request is completed?

Change SVG path data into a range of 0 to 1 in order to utilize it as a clip path with objectBoundingBox

Incorporating a custom background image for Google Maps

Implementing a clickable search icon within a form input field using CSS: a guide

Modifying the TITLE dynamically post header insertion: A guide

Struggles with organizing tables in asp.net

Is there an issue with the JavaScript functionality of the max/min button?

Calculating totals in real-time with JavaScript for a dynamic PHP and HTML form that includes quantity,

How to prevent jQuery from continually recalculating width on window resize?

Enhancing Time Precision in CakePHP: Introducing Quarter-Accurate Time Input

The background image on Nuxt.js is not adapting to different screen sizes

Unlocking fashion with $refs: A step-by-step guide

Display array elements in a PDF document using pdfmake

CSS styling for a background image in the header

Positioning of header, main content, and footer elements

Stop the text from wrapping to the full width of its parent when it overflows onto the following line

HTML files do not inherit from other HTML files

I'm looking for a way to add an onclick event to every element created by Vue.js through a "v-for" loop in order to toggle the visibility of its inner content