How to apply CSS borders selectively to specific div elements

I want to add a right side border to all div elements except for the last one in each row, where the number of columns in the row varies based on the bootstrap grid system and device.

The row could have 4, 3, 2, or 1 column.

If there are 4 columns, only the first 3 should have a right border. If there are 3 columns, only the first 2 should have a right border. and so on.

rg-product-container {
  border-bottom: 1px solid #eee;
  min-height: auto;
  padding: 30px;
}

.rg-product-container:nth-child(1n+1) {
  border-right: 1px solid #eee;
}
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
  <!-- ... More dynamically generated HTML -->
</div>

To demonstrate what I mean, I've created this photo. The CSS code above produces a result similar to the image below. My goal is to remove the red border shown in the photo, which varies based on the bootstrap grid configuration.

https://i.sstatic.net/UHFer.jpg

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Using the combination of <code>outline
and overflow:hidden on the row will achieve the desired effect.

.rg-product-container {
  outline: 1px solid red;
  padding: 30px;
}

.row {
  overflow:hidden;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
  </div>
</div>

Answer №2

To style all but the last child of a row with no border, you can utilize the last-of-type selector in your CSS code. See below for an example:

.product-item {
    border-bottom: 1px solid #ccc;
    padding: 15px;
}
.product-item:last-of-type {
    border-bottom: none;
}

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

show a pair of input buttons within a form

Seeking assistance with a contact form I created using bootstrap. The issue lies in the placement of the submit and clear buttons, which are currently stacked on top of each other instead of being displayed inline next to each other. The form contents are ...

htmlcssbootstrap-4

Customizing Bootstrap styles with a custom CSS file

Currently, in my Django project, I am attempting to customize the base.html file which is utilizing the default bootstrap.min.css by replacing it with a custom.css file like so: base.html: <body id="bootstrap-overrides"> custom.css: #bootstrap-ov ...

cssdjangooverriding

Tips for triggering the .click() function upon returning to index.html after visiting a different page

I'm in the process of creating a portfolio website where the index.html page features a sliding navigation bar that displays a collection of projects. Each project is linked to a separate work.html page. I would like the sliding nav to automatically o ...

javascripthtmlcss

Tips for concealing an entire menu on WP, with the exception of items labeled as current-menu-ancestor

On my Wordpress site, I am faced with a simple problem to solve. I have a primary menu at the top and a secondary menu on the left side. While the top menu only contains level 1 items, the left menu has all the items. To customize the left menu, I am utili ...

htmlcsswordpresscss-selectors

Angular 8 form controls becoming unresponsive while the list is being loaded

Hello, I am currently experiencing an issue in Angular. I have a page with a basic Angular form and two independent components that load lists from an API (comments with 500+ records and posts with 500+ records). The Problem: While trying to enter values ...

htmlangularangular5angular7angular8

Using anchor tags to send HTML code through email

I currently have an anchor tag on my website that looks like this: <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e0d11131b11101b3e0d11131b09161b0c1b501d1113">[email protected]</a>?subject=Wel ...

javascripthtmlhtml-emailmailto

Perform an AJAX request to an encrypted URL with an unverified certificate

I'm experiencing an issue with my site that makes AJAX JSONP calls to a secured (SSL) web server. Everything works smoothly when using an unsecured (HTTP) web server, but once I switch to the SSL version, the call never returns. After checking with Fi ...

javascriptjqueryhtmlsslhttps

Alert: An error message is displayed despite completing the required field

My apologies in advance as I am new to coding and there may be a glaring mistake in my current project. I am creating a survey that requires participants to enter their age. The demographic data questions are organized in a table format, with code borrowed ...

html

How to create horizontal spacing between divs using Bootstrap 3

I am struggling to create a small horizontal space between the "Away Team" and "Baseball Field" divs in my code. I have tried adjusting padding, margins, and even adding decimal column offsets without any success. The desired spacing effect can be seen in ...

htmlcsstwitter-bootstraptwitter-bootstrap-3grid

Next.js is causing me some trouble by adding an unnecessary top margin in my index.js file

I started a new project using next.js by running the command: yarn create next-app However, I noticed that all heading and paragraph tags in my code have default top margins in next.js. index.js import React, { Component } from "react"; import ...

javascriptcssreactjsnext.jsjsx

The toggle button is unresponsive and the menu fails to slide down smoothly

When the quiz menu is clicked, it slides down to reveal four divs within a single div. Here is the fiddle link for reference: fiddle link. Below is the HTML code: Toggle button for quizzes: <ul> <li id="togglebtn"class="quizli"><a href= ...

javascripthtmlcss

Tips for aligning headers and columns in the same row within an HTML document

Is there a way to keep Table Headers and columns aligned in HTML without wrapping to the next line? Please assist, thank you! ...

htmlcssbootstrap-4

Changing the styling of a WordPress website by overriding a CSS value

Lately, I've been working on a website using Elementor. While inspecting the source code of the website, I noticed a line that reads: img { height:auto; } Is there a method to apply custom css to the website in order to bypass this line and ove ...

htmlcsswordpresselementor

I have a JSON file that I want to parse and display the data on my website from my local server

I am currently facing an issue with fetching my JSON file using an ajax request. The specific data contained in the JSON file needs to be displayed on the web page by parsing it through a variable. However, upon running the code, only the HTML elements I h ...

javascriptjqueryhtmljsonajax

Change a variable on the fly without needing to reload the page

<!DOCTYPE html> <!-- To update your slot machine images without refreshing the page, you can use JavaScript to dynamically change the images on click. Here's a simple example using JavaScript: <html> <head> <title& ...

phphtmlcss

CSS universal selector not applying to images

I have scoured through different resources and they all seem to echo the same information. Here is the code in question: *:not(img) { display: none; } Its intended purpose is to hide everything on the page except images. However, it seems to be hiding t ...

htmlcssimage

What are the best methods for creating a responsive website?

Strategies for implementing responsive design on a website ...

htmlcssbootstrap-4

Javascript does not have the capability to interact directly with HTML code

I am facing an issue with my JSP code that is supposed to validate password and confirm password before submitting the form to a Java servlet. The problem is, even though I have written the validation script, it does not show alert messages or focus on t ...

javascriptjavahtmljsp

Exploring the Fusion of Different Styles in Material-UI Using React

I have two different styles that I use in my code. One style is specific to certain components, while the other style is global and used across various components. For example, consider the following file tree: index.tsx -App.tsx -globalConstants.ts In ...

javascriptcssreactjsstylesmaterial-ui

Creating secure online forms with password fields that incorporate jQuery functions for added functionality

I'm looking to enhance the security of my password entry field by requiring specific criteria: Both Password textboxes 1 and 2 must include an uppercase letter, a lowercase letter, a number, and special characters, and they should be between 8 to 30 ...

javascriptjqueryhtml