What is the best way to eliminate the border-bottom of the final div separator using CSS?

I have set up a div box to display the latest news, with each news item separated by a border-bottom. Instead of using ul li in the HTML, I am opting for simple div elements. However, I am encountering an issue where the last news item also displays the border-bottom separator. I have attempted to use the :last-child selector to remove it, but without success. I am aware that using ul li would allow me to solve the problem with :last-child, but I prefer not to alter my HTML structure. Below is a snapshot:

HTML CODE:

<div class="float_left_div posts">
    <h3>Latest News</h3>
    <div class="news_wrapper">
        <div class="news_txt">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. <span>more+</span></p>
        </div>
        <div class="div_separator"></div>
    </div>
    <div class="news_wrapper">
        <div class="news_txt">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. <span>more+</span></p>
        </div>
        <div class="div_separator"></div>
    </div>
    <div class="news_wrapper">
        <div class="news_txt">
            <p>Lorem ipsum dolor sit amet, consectiuer adipiscing elit, sed diam nonummy. <span>more+</span></p>
        </div>
        <div class="div_separator"></div>
    </div>
</div>

View the demo here on JSFiddle.

How can we remove the last border-bottom separator while keeping the same HTML structure?

htmlcss

Answer №1

Eliminate the border by utilizing the CSS last-child attribute.

.posts .news_wrapper:last-child .div_separator
{
border-bottom:0px;
}

View DEMO

Answer №2

It is important to keep in mind that the :last-child pseudo-class may not function properly in several browsers. If I were in your position, I would suggest placing the border at the top rather than the bottom and utilizing the following code:

.posts .news_wrapper:first-child .div_separator{border-top:0px;}

It is worth noting that :first-child is supported in the majority of browsers.

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

What is preventing images from displaying in my slider within baguetteBox?

Currently, I am in the process of incorporating a slider into my website using the baguetteBox library. After consulting the documentation, I successfully implemented an example that is functioning smoothly without any issues. In order to display a series ...

javascripthtmlcssreactjsslider

What is the best way to align this image in the center?

I've been struggling with this problem for a while now and can't seem to find a solution. I need to center align this image within the form, but everything I've tried so far has been unsuccessful. It may seem like I'm providing too much ...

htmlcss

What is the best way to make a drop down menu list appear when I click on the parent li, and then show the sub li using JavaScript?

I have a code that includes an image, HTML, and CSS code. Can anyone please tell me how I can set up a drop-down menu list to open the sub <li> elements when I click on a parent <li> using JavaScript? You can see the appearance of the code in t ...

javascriptphphtmlcss

Updating $scope variables in AngularJS for real-time refreshing in the HTML

Is there a way to automatically trigger my variable in the $scope object? //controller setInterval(function(){$scope.rand=Math.random(10)},1000); //template {{rand}} I am having trouble updating the 'rand' variable on my page. What is the solu ...

javascripthtmltemplatesangularjs

The div element is finally loading properly after multiple clicks

I need some assistance with loading dynamic divs in Angular. I have created a button that adds new divs each time it is clicked in a specific area. However, once these new divs are added, they appear incorrectly: https://i.sstatic.net/sAE6q.png After add ...

javascripthtmlangulartypescriptprimeng

Stop flex items from expanding larger than their sibling elements

Is there a way to prevent a flex item from growing bigger than its siblings? Check out the example on CodeSandbox: LINK Here is the sample code: <div class='wrapper'> <div class='box one'></div> <div class ...

htmlcssflexbox

Is there a way to configure the positioning of Bootstrap carousel thumbnails to be above and beside?

My goal is to customize a bootstrap 5 thumbnails carousel by placing the thumbnails either on the top or the left side of the slides section. The default setting is at the bottom, but I need these two variations. The base model works perfectly, but I' ...

csstwitter-bootstrapcarouselbootstrap-5

Exploring the process of querying two tables simultaneously in MySQL using PHP

I currently have a search box in my PHP file that only searches from the "countries" table. However, I also have another table called "continent" and I would like the search box to retrieve results from both the "countries" and "continent" tables. Here is ...

javascriptphphtmlmysql

The mobile-responsive dropdown navigation bar functions well on browsers with small widths, but does not work properly on my phone

I am experiencing an issue with the mobile responsive dropdown navigation bar on my website. It works perfectly fine on a small width browser, but when I try to open it on my phone, nothing happens. This is puzzling me as I am new to making websites respon ...

javascriptjqueryhtmlcss

Unable to conceal a DIV using React

I'm attempting to hide a div programmatically upon clicking a button. I've written the following code, but it doesn't seem to be working (the Div remains visible): import React, {useState} from 'react'; import './Button.css&ap ...

cssreactjs

What is the purpose of activating hover styles when tapping on mobile devices?

On my button, you can see the color change when hovering: button { background-color: orange; } button:hover { background-color: darkorange; } Check out this example: https://jsfiddle.net/oepb5ks4/ While this works well on desktop, it's a diffe ...

htmlcss

What is the best way to design a webpage that adapts to different screen heights instead of widths?

I'm in the process of designing a basic webpage for a game that will be embedded using an iframe. The game and text should always adjust to fit the height of your screen, so when the window is small, only the game is displayed. The game will be e ...

javascriptcssiframeresponsive-designmedia-queries

Is there a way to align the input and button side by side using Bootstrap v5?

Is there a way to make my input textbox and button appear side by side without using the d-flex class in the div? I want to center align the content but removing the class messes up the alignment. Any suggestions on how to accomplish this? <!DOCTYPE htm ...

htmlcssbootstrap-5

The animation on my jQuery script seems to be malfunctioning

I'm encountering an issue with a div element that is partially off the screen and should move out when a button is clicked. I've shared my script here, but it seems to not work as intended when the button is pressed. The visualization in jsfiddle ...

jqueryfacebookhtml

Confirm that the form is valid prior to displaying the Bootstrap modal popup

My PHP file contains a simple form and a Bootstrap modal. When the submit button is clicked, the Bootstrap modal will be displayed. The form includes: https://i.sstatic.net/10R2r.png I want to validate the fields in the form. If successful, I then need ...

javascriptphpjqueryhtmlbootstrap-modal

What is the best way to use html, css, jquery, and bootstrap to show or hide images without any extra space or alignment issues

I am looking to showcase 6 images on a page using the Bootstrap grid layout. The images should be displayed in two rows, with 3 images in each row. Additionally, I want to implement a filter functionality using Isotope, so users can click on a specific cat ...

javascripthtmlcssbootstrap-4

Is there a way to position an X item on the first row and another X item on the following row using flexbox?

I want to use flexbox to arrange 10 buttons in a row on a large screen. On a medium screen, I'd like 5 buttons on the first row and 5 on the second row. For small screens, 2 buttons per row, and for very small screens, one button per row. It's im ...

csswebflexbox

Utilizing AJAX to transmit information to the database through a query

I have a form on my HTML page that I want to send to a PHP page using AJAX. It looks like the AJAX part is working, as I can see that it reacts when the button is clicked. However, the PHP page is not receiving the form content because nothing seems to be ...

phphtmlajax

What is the best way to make multiple HTML tables sortable?

I recently implemented an open-source JavaScript table sorter in my project. You can find more information about it here: However, I encountered an issue where only the most recently added table on my page is sortable. When users press a button, new table ...

javascriptjqueryhtmlajax

AngularJS - Changing Views with Templates

At the moment, I am changing my directives in the following manner. Within my directive: (function(){ 'use strict'; var controller = ['$scope', function ($scope) { }]; angular .module('moduleName' ...

phphtmlangularjsangularjs-directive