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?

htmlcss

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

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 №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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using an HTML form to send a PDF file through Nodemailer

A form with an upload file input needs to allow users to upload their file and send it through the form. Currently, the attached PDF file in the email doesn't contain any data and won't open properly. The nodemailer options are set up as follows ...

htmlnode.jsexpressnodemailer

Iterating through elements within a Div will retrieve the initial element exclusively

Is there a way to loop through all elements within the MainDiv Div in order to retrieve their values? Currently, I am only able to retrieve the value of the first element. <div id="MainDiv"> <input type="text" id="MyText"value="Text1" /> ...

javascriptjqueryhtmlcss

The jQuery .hasClass() function does not work properly with SVG elements

I am working with a group of SVG elements that are assigned the classes node and link. My goal is to determine whether an element contains either the node or link class when hovering over any of the SVG components. However, I am encountering an issue where ...

javascriptjqueryhtmlcsssvg

Is there a way for me to determine the quality of a video and learn how to adjust it?

(function(){ var url = "http://dash.edgesuite.net/envivio/Envivio-dash2/manifest.mpd"; var player = dashjs.MediaPlayer().create(); player.initialize(document.querySelector("#videoPlayer"), url, })(); var bitrates = player.getBitrateInfoListFor("vid ...

javascripthtmlmpeg-dashdash.js

Platform designed to simplify integration of high-definition imagery and scalable vector illustrations on websites

In the ever-evolving world of technology, some clients support advanced features like svg while others do not. With the rise of high resolution devices such as iPhone 4+ and iPad 3rd gen., it has become crucial to deliver graphics that can meet these stand ...

javascriptjqueryhtmlcss

Determining when a message has been ignored using php

One of the features I am working on for my app is adding announcements, which are essentially personalized messages to users. Once a user receives a message and dismisses it, I want to ensure that specific message does not appear again. Here is the PHP co ...

javascriptphphtmljquery

Displaying text on an image when hovering over it

I have tried various solutions that I came across, but none of them have been successful so far. My goal is to display dynamic text over an image when the user hovers over it. Additionally, I would like to change the hover color. Currently, the text is alw ...

htmlcsshover

Searching for all choices within a select dropdown using Selenium and Python

There's a website called noveltop (.net) that hosts web novels, and on each chapter page, there is a dropdown menu where you can select the chapter you want to jump to. I've been using Selenium with Python and the Firefox (or Chrome) driver to e ...

javascriptpythonhtmlselenium

Enable drawing on a div element and synchronizing it across multiple divs using Javascript and HTML5

I am embarking on a project to create a website that allows users to doodle on an element and share it with others viewing the page using ajax - essentially a small-scale whiteboard feature. While I have a good grasp of HTML, CSS, Javascript (specificall ...

phpjqueryajaxhtmlhtml5-canvas

Ensure that the heading cells in the table header (thead) are properly

Struggling with aligning the thead with the td in the tbody? I attempted adjusting the thead using display: table-header-group;, but discovered that padding doesn't work on 'table-header-group'. This led me to try adding padding-left to my t ...

htmlcssangularjs

Issues creating bar graphs using HTML

I am currently working on creating a script that can display statistics from a database in the form of a bar chart. My idea is to have two colored bars stacked on top of each other, representing different values simultaneously - for example, the number of ...

phphtmlcharts

Resolving formatting challenges in R markdown with Blastula

Dealing with formatting problems while trying to include an R markdown file in an email body. As a CSS novice, I'm struggling to find a solution and it's becoming quite frustrating. The table has the following CSS styling: <!DOCTYPE html ...

cssremailmarkdownblastula

Tips for adjusting the position of overflowing text on a website using CSS in real-time

I'm currently working on an Angular application and I'd like to customize the styling so that any text exceeding 128 characters is not displayed. Ideally, if the text exceeds 128 characters, it should move to the left; otherwise, it should remain ...

cssangulartypescript

React Application not reflecting recent modifications made to class

My current project involves creating a transparent navigation bar that changes its background and text color as the user scrolls. Utilizing TailwindCSS for styling in my React application, I have successfully implemented the functionality. // src/componen ...

javascripthtmlcssreactjstailwind-css

error in jquery when splitting

I encountered an issue while trying to split data for checkboxes. var ukuran = data['model'].ukuran_model; var cek = ukuran.split(",").join('], [value='), $inputs = $('input[name^=ukuran]'); $inputs.filter('[value=&a ...

jqueryhtmljson

Unforeseen outcomes arise when toggling expansion in JavaScript

I have a pop-out div at the top of my page that expands and closes on toggle. Also, when I toggle the pop-out div, it changes the top position of another div (a side pop-out menu). The issue is that the side pop-out menu should only appear when clicking ...

javascripthtmlcss

ngSwitchCase provider not found

While following a tutorial and trying to implement what I learned, I encountered an error that I'm having trouble understanding. The browser console shows an error message stating [ERROR ->]<span *ngSwitchCase="true">, but I can't figure ...

javascripthtmlcssangular

Troubleshooting Bootstrap image alignment problem with columns on extra small screens

My website showcases screenshots of my software in a div element. Everything looks great on larger screens, but once I switch to a phone or resize the window, the images don't align properly, leaving empty space. Refer to the image below for clarifica ...

htmlcssimagetwitter-bootstrap-3alignment

Importing CSS with Node Sass using npm

Instead of inlining css within sass, I attempted to utilize the npm package Node Sass CSS importer. Unfortunately, I am struggling to get it to function properly. I typically use npm as my build tool: "build:css": "node-sass some_path/style.scss some_pa ...

cssnode.jsnpmsass

Adjust the regular expression to accommodate uppercase letters and incorporate numerical values

I've been using this regex expression for an input pattern in HTML that covers a range of URLs and IP addresses: ^(https?://)?[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}/?$|^(https?://)?([a-z][a-z]+\.)+[a-z][a-z]+/? This regex ...

htmlregex