Using a CSS nth-child selector to eliminate the bottom margin of the final row

As I work on creating lists that are displayed in columns of two, each .customer-review-container includes a margin-bottom CSS property like this:

<div class="col-md-6">
    <div class="customer-review-container">

    </div>  <!-- end customer-review-container -->
</div>

<div class="col-md-6">
    <div class="customer-review-container">

    </div>  <!-- end customer-review-container -->
</div>

<div class="col-md-6">
    <div class="customer-review-container">

    </div>  <!-- end customer-review-container -->
</div>

<div class="col-md-6">
    <div class="customer-review-container">

    </div>  <!-- end customer-review-container -->
</div>

My goal is to create an nth-child selector to remove the margin-bottom for the last row (3rd and 4th div elements), so I experimented with the following code:

div:nth-child(3n+1).customer-review-container{
    margin-bottom: 0;
}

However, this code only removes the margin-bottom from the last div element (4th div).

htmlcssmargincss-selectors

Answer №1

Here is the solution you've been looking for:

.col-md-6:nth-last-child(-n+2) .customer-review-container {
     margin-bottom: 0;
}

Check out the DEMO

Answer №2

styling div elements every third with a customer review container class to have zero margin at the bottom.

Answer №3

To target the last two children, you can employ the nth-last-child(n) selector in the following manner:

.customer-review-container:nth-last-child(-n+2) {
  margin-bottom: 0;
}

This CSS rule will style the last two children accordingly.

Answer №4

Utilize:

div:nth-child(n+3) .customer-review-container{
    margin-bottom: 0;
}

The :nth-child(n+3) selector will focus on every div with an index greater than or equal to 3 (indexes starting from 1).

UPDATE:

If you aim to target the last row, regardless of whether there are one or two elements, utilize this selector:

div:nth-last-child(-n+2):nth-child(odd) > .customer-review-container,
div:nth-last-child(-n+2):nth-child(odd) + div > .customer-review-container {
    margin-bottom: 0;
}

Example:

.wrapper {
  border: 1px solid red;
  overflow: hidden;
}
.customer-review-container {
  border: 1px solid black;
  margin-bottom: 20px;
}
div:nth-last-child(-n+2):nth-child(odd) > .customer-review-container,
div:nth-last-child(-n+2):nth-child(odd) + div > .customer-review-container {
  margin-bottom: 0;
  background: blue;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
  <div class="col-md-6">
    <div class="customer-review-container">
      Lorem
    </div>
  </div>
  <div class="col-md-6">
    <div class="customer-review-container">
      Lorem
    </div>
  </div>
  <div class="col-md-6">
    <div class="customer-review-container">
      Lorem
    </div>
  </div>
  <div class="col-md-6">
    <div class="customer-review-container">
      Lorem
    </div>
  </div>
  <div class="col-md-6">
    <div class="customer-review-container">
      Lorem
    </div>
  </div>
  <div class="col-md-6">
    <div class="customer-review-container">
      Lorem
    </div>
  </div>
  <div class="col-md-6">
    <div class="customer-review-container">
      Lorem
    </div>
  </div>
  <div class="col-md-6">
    <div class="customer-review-container">
      Lorem
    </div>
  </div>
  <div class="col-md-6">
    <div class="customer-review-container">
      Lorem
    </div>
  </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

What is the process for incorporating multiple HTML pages into an Ionic hybrid mobile application?

Struggling to combine my sign in and sign up pages into a single index.html page. I'm currently working on a project involving Hybrid mobile app development. ...

javascripthtmlangularjsionic-framework

"Can anyone tell me why my index.html file isn't recognizing the style.css file located in my css directory

In the directory structure below, I have the following files: mywebsite/ ├── css/ │ ├── style.css │ ├── index.html This is my HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

htmlcssxampp

Eliminating gaps between elements

I recently delved into the world of web design, and although I have a basic understanding of HTML and CSS, I am determined to enhance my skills and knowledge by creating a standard home page. So far, I managed to create a standard navigation bar, and now ...

htmlcsstwitter-bootstrap

Tips for activating and setting up Bootstrap popovers

I've been trying to add some popovers to my webpage, but I'm facing a hurdle. I added a few button popovers in the footer, but nothing happens when they're clicked. I created a js file for initialization and imported it at the end of my pa ...

javascripthtmlbootstrap-5bootstrap-popover

Ways to ensure that the height of a div remains consistent across all scenarios

https://i.sstatic.net/6LY1C.png Below is the code snippet, which utilizes bootstrap. I need to set a fixed height for a div that is populated dynamically from a database. The goal is to maintain the height of the div regardless of the content length. If ...

phphtmlcsstwitter-bootstrap

A pop-up window for selecting a file within an <a> tag

Is there a way to create an Open File dialog box on a link within my webpage? I attempted <input name="uploadedfile" type="file"> However, it only functions as a button and does not allow for the selection of multiple files. I would like somethin ...

javascripthtml

Integration of a QR code scanner on a WordPress website page

I'm in the process of setting up a QR code scanner on my Wordpress site or within a popup. The goal is for users to be able to scan a QR code when they visit the page/popup link. Specifically, the QR code will represent a WooCommerce product URL, and ...

javascriptphphtmlhtml5-canvas

Achieving perfect alignment for CSS heading and floated controls in the center of the page

I seem to encounter situations where I need inline-block elements on opposite ends of the same "line" while also needing them to be vertically aligned. Take a look at this example: http://jsfiddle.net/96DJv/4/ (focus on aligning the buttons with the headi ...

cssvertical-alignment

What is the process for determining the area of the section?

Take a look at this page as an example - scrolling down on responsive devices reveals related navigation areas which I aim to change with scrollspy (affix fixed navigation). Having a bootstrap navbar, when on the corresponding section of the navbar while u ...

jquerycsstwitter-bootstrap

Transforming "datetime-local" into java.sql.Timestamp

I am working on a JSP page that has a form containing an input field with type "datetime-local". The data from this form is then passed to a servlet using the following code: String resetTimeString = request.getParameter(RequestParameterName.RESET_TIME); ...

javahtmltimestamp

What is the reason for the .foo a:link, .foo a:visited {} selector taking precedence over the a:hover, a:active {} selector in CSS?

Sample code: http://jsfiddle.net/RuQNP/ <!DOCTYPE html> <html> <head> <title>Foo</title> <style type="text/css"> a:link, a:visited { color: blue; } a:hover, a:active { ...

csscss-selectors

The functionality of the CSS transform property seems to be malfunctioning

My HTML and CSS code displays texts in two blocks within a dl element. I attempted to change the ▶ symbol to a different shape using the css transform scale property. However, some browsers only show the triangle in the first column. Why is this happenin ...

htmlcss

Iterating through a nested array in order to dynamically generate elements using JavaScript/jQuery

Seeking assistance with a specific issue I am facing. Despite extensive research on this platform, I have not found a solution to my problem. Recently, I successfully used jQuery each to loop over objects. However, I am currently struggling to iterate thro ...

javascripthtmljqueryarraysloops

Angular - when removing items from ngRepeat, the remaining elements do not transition smoothly; instead, they abruptly snap or jump into position

Currently using AngularJS v1.4.8 with ngAnimate injected into my controller. In the process of creating a dynamic list using ngRepeat, tied to an array. The addition and updating of items in the list function smoothly with animations working as intended. ...

cssangularjsanimationangularjs-ng-repeatng-animate

Begin by positioning flex elements outside of the screen and then animate them into their final

I'm struggling to find the right approach to make this animation work effectively. Currently, I have two elements centered vertically within a flexbox layout. My goal is to animate these elements into their final positions by sliding in from off-scre ...

cssanimationflexbox

Enter the website address into the designated text field, then simply click on the GO button to be redirected to the destination website within

I'm looking for a basic HTML code that allows users to input a website URL in a text field on my website, hit "GO," and be redirected to the entered site. It seems like this feature is hard to come by as I haven't found any websites with similar ...

htmlhttp-redirect

Requiring addresses for Google Maps in order to display directions

To display the directions between two addresses based on the chosen transportation mode, I need to pass the addresses to the code in page 2. After the user selects two cities from a Dropdown box on page 1, they will be sent to the code to show their locati ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

I need to display 5 columns in a parent component, each with its own unique icon. How can I conditionally render them in a React component?

Creating a parent component to reuse multiple times can be very useful. In my case, I have included 5 different icons in each instance of the component, all taken from hero icons. I have set up an object with unique ids for each child component, but I am ...

javascriptcssreactjs

Highslide's Page Z-Index Elevation

Hey there, I'm currently facing an issue with the z-index positioning of an in-page gallery on my website. I attempted to use the hs.zIndexCounter attribute but unfortunately, it didn't solve the problem. Just so you know, my navigation bar has ...

csshighslide

Display new information within a div element seamlessly without refreshing the page

Just a heads-up, I'm new to HTML development... Currently working on a website using Bootstrap. There are some buttons on the left side shown in the screenshot, and my goal is to update the content on the right without having to reload the entire pag ...

javascripthtmlcsstwitter-bootstrap