Add distinct margins to the initial and final elements that are not related

Question

Add distinct margins to the initial and final elements that are not related

In my HTML, I have a certain type of box with a margin: 10px; applied to all of them. These boxes are displayed in a row on the page using Bootstrap, and I'm trying to figure out how to remove the left margin from the first element and the right margin from the last element. The challenge is that the elements are not siblings and do not have a common parent. Here's an example of the HTML structure:

<div class='container'>
  <div class='col-md-2'>
    <div class='MY-CUSTOM-BOX'>
    </div>
  </div>
  <div class='col-md-5'>
    <div class='MY-CUSTOM-BOX'>
    </div>
  </div>
  <div class='col-md-5'>
    <div class='MY-CUSTOM-BOX'>
    </div>
  </div>
</div>

While :first-of-type applies to all boxes, there's uncertainty about how to approach :first-child because of the nested divs. Any suggestions on how to tackle this issue?

html css twitter-bootstrap css-selectors margin

Answer 1

Answer №1

If you're looking to achieve this, consider using a combination of css selectors like the >, :first-child, and :last-child

:first-child > .MY-CUSTOM-BOX {
  margin-left: 0;
}

:last-child > .MY-CUSTOM-BOX {
  margin-right: 0;
}

This approach targets direct descendants of first and last child elements containing MY-CUSTOM-BOX. It works well when boxes are at the same level within their parent structure (e.g., container -> div -> MY-CUSTOM-BOX).

You could also reverse the order for potentially better outcomes depending on your nesting levels:

.container > :first-child .MY-CUSTOM-BOX {
  margin-left: 0;
}

.container > :last-child .MY-CUSTOM-BOX {
  margin-right: 0;
}

In this scenario, the first and last children of container will have any nested MY-CUSTOM-BOX elements with zero margins.

See a demonstration of both methods here: https://jsfiddle.net/ttakchr1/

Answer 2

If you're looking to achieve this, consider using a combination of css selectors like the >, :first-child, and :last-child

:first-child > .MY-CUSTOM-BOX {
  margin-left: 0;
}

:last-child > .MY-CUSTOM-BOX {
  margin-right: 0;
}

This approach targets direct descendants of first and last child elements containing MY-CUSTOM-BOX. It works well when boxes are at the same level within their parent structure (e.g., container -> div -> MY-CUSTOM-BOX).

You could also reverse the order for potentially better outcomes depending on your nesting levels:

.container > :first-child .MY-CUSTOM-BOX {
  margin-left: 0;
}

.container > :last-child .MY-CUSTOM-BOX {
  margin-right: 0;
}

In this scenario, the first and last children of container will have any nested MY-CUSTOM-BOX elements with zero margins.

See a demonstration of both methods here: https://jsfiddle.net/ttakchr1/

Add distinct margins to the initial and final elements that are not related

Answer №1

Similar questions

Is it possible to connect ng-model with a style tag?

Vue - Embedding <div> elements in a recursive manner

Adjust the ARIA value of a Bootstrap progress bar within a VueJS component on the fly

Troubleshooting the non-functioning addEventListener in JavaScript

What is the best way to apply one JavaScript code to two separate HTML elements?

Moving draggable items out of a div and placing them into a designated droppable area

The functionality of scrolling ceases to work once the bootstrap modal is closed

Is there a way to automate tasks after successfully entering my credentials on the login page and being redirected to a new URL?

Looking for ways to ensure React is responsive and feeling a bit challenged by the React mentality?

What is the best way to fill in the jquery treeselect widget?

Initially, my PDF file does not get selected, except in the Internet Explorer browser

What is the method for adjusting the border color of an ng-select component to red?

What could be preventing this code from automatically scrolling to the designated class when a key is pressed?

Creating consistent widths for drop downs and text boxes in Bootstrap

This is an alignment of the background image ('relative') to the right side

Transform a <ul> into an <ol> format (replacing bullets with numbers)

Using jQuery, it is possible to eliminate a div element without affecting its contents

The Javascript function I created references a variable that seems to be undefined in the code

The CSS Grid does not align properly in the horizontal direction when displayed on mobile devices

Default behavior in Fullcalendar 6 allows for rendering links on both days of the month and weekdays